HTML نماذج

العنصر <form>

<form>يحدد عنصر HTML نموذجًا يُستخدم لجمع مدخلات المستخدم:

<form>

.

form elements

.

</form>

يحتوي نموذج HTML على عناصر النموذج .

عناصر النموذج هي أنواع مختلفة من عناصر الإدخال ، مثل حقول النص وخانات الاختيار وأزرار الاختيار وأزرار الإرسال والمزيد.

عنصر <input>

<input> هو أهم عنصر النموذج.

يمكن عرض عنصر في عدة طرق، اعتمادا على نوع السمة.

وهنا بعض الأمثلة:

إدخال النص

<input type="text">يحدد مجال إدخال سطر واحد لإدخال النص :

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

ملاحظة: النموذج نفسه غير مرئي. لاحظ أيضًا أن العرض الافتراضي لحقل النص هو 20 حرفًا.

راديو – زر الإدخال

<input type="radio">يحدد زر الراديو .

تتيح أزرار الاختيار للمستخدم اختيار واحد من عدد محدود من الخيارات:

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

زر الإرسال

<input type="submit">يحدد زرًا لإرسال بيانات النموذج إلى معالج النماذج .

عادةً ما يكون معالج النماذج صفحة خادم تحتوي على برنامج نصي لمعالجة بيانات الإدخال.

يتم تحديد معالج النماذج في سمة إجراء النموذج :

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

Action

actionتحدد السمة العمل التي يتعين القيام بها عند تقديم النموذج.

عادة ، يتم إرسال بيانات النموذج إلى صفحة ويب على الخادم عندما ينقر المستخدم على زر الإرسال.

في المثال أعلاه ، يتم إرسال بيانات النموذج إلى صفحة على الخادم تسمى “/action_page.php”. تحتوي هذه الصفحة على برنامج نصي من جانب الخادم يعالج بيانات النموذج:

<form action="/action_page.php">

إذا تم حدف action ، فسيتم تعيين الإجراء على الصفحة الحالية.

Target

targetتحدد السمة إذا كانت النتيجة تقدم ستفتح في علامة تبويب جديدة في المتصفح، إطار، أو في الإطار الحالي.

القيمة الافتراضية هي ” _self” مما يعني أنه سيتم إرسال النموذج في النافذة الحالية.

لجعل نتيجة النموذج مفتوحة في علامة تبويب متصفح جديدة ، استخدم القيمة ” _blank“:

<form action="/action_page.php" target="_blank">

القيم القانونية الأخرى هي ” _parent” ، ” _top” ، أو اسم يمثل اسم iframe.

Method

methodتحدد السمة طريقة HTTP ( الحصول على أو وظيفة ) لاستخدامها عند تقديم بيانات النموذج:

<form action="/action_page.php" method="get">

أو:

<form action="/action_page.php" method="post">

متى يجب استخدام GET ؟

الطريقة الافتراضية عند إرسال بيانات النموذج هي GET.

ومع ذلك ، عند استخدام GET ، ستكون بيانات النموذج المقدمة مرئية في حقل عنوان الصفحة :

/action_page.php?firstname=Mickey&lastname=Mouse

ملاحظات على GET:

• إلحاق بيانات النموذج في عنوان URL في أزواج الاسم / القيمة
• طول عنوان URL محدود (حوالي 3000 حرف)
• لا تستخدم GET لإرسال البيانات الحساسة! (سيكون مرئيًا في عنوان URL)
• مفيد لعمليات إرسال النماذج حيث يريد المستخدم وضع إشارة مرجعية على النتيجة
• يعد GET أفضل بالنسبة للبيانات غير الآمنة ، مثل سلاسل الاستعلام في Google

متى استخدام POST ؟

استخدم دائمًا POST إذا كانت بيانات النموذج تحتوي على معلومات حساسة أو شخصية. لا تعرض طريقة POST بيانات النموذج المقدمة في حقل عنوان الصفحة.

ملاحظات على POST:

• ليس لدى POST قيود على الحجم ، ويمكن استخدامها لإرسال كميات كبيرة من البيانات.
• لا يمكن وضع إشارة مرجعية لنماذج الطلبات مع POST

سمة الاسم

يجب أن يكون لكل حقل إدخال name يتم تقديمها.

إذا تم حذف name، فلن يتم إرسال بيانات حقل الإدخال على الإطلاق.

هذا المثال سيرسل فقط حقل الإدخال “اسم العائلة”:

<form action="/action_page.php">
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

تجميع بيانات النموذج مع <fieldset>

<fieldset>يستخدم عنصر إلى البيانات المتعلقة الجماعة في النموذج.

<legend>يحدد العنصر توضيحية ل <fieldset>.

<form action="/action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

فيما يلي قائمة بجميع <form>: