45 – سمات النموذج (form) في HTML لعنصر الإدخال ()*

يصف هذا الفصل السمات المختلفة المتعلقة بالنموذج (form) لعنصر الإدخال (<input>) في HTML.*

سمة النموذج (form)

تحدد سمة النموذج (form) النموذج الذي ينتمي إليه عنصر الإدخال (<input>).

يجب أن تكون قيمة هذه السمة مساوية لسمة المعرف (id) الخاصة بعنصر النموذج (<form>) الذي ينتمي إليه.

مثال:

حقل إدخال يقع خارج نموذج HTML (لكنه لا يزال جزءًا من النموذج):

<form action="/action_page.php" id="form1">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>

<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">

سمة formaction

تحدد سمة formaction عنوان URL للملف الذي سيعالج البيانات عند إرسال النموذج.

لاحظ أن هذه السمة تتجاوز سمة action الخاصة بعنصر النموذج (<form>).

تعمل سمة formaction مع نوعي الإدخال التاليين: submit و image.

مثال

نموذج HTML مع زري إرسال، ولكل منهما إجراء مختلف:

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>

سمة formenctype

تحدد سمة formenctype كيفية ترميز بيانات النموذج عند إرساله (فقط للنماذج ذات method=”post”).

لاحظ أن هذه السمة تتجاوز سمة enctype الخاصة بعنصر النموذج (<form>).

تعمل سمة formenctype مع نوعي الإدخال التاليين: submit و image.

مثال

نموذج يحتوي على زري إرسال. يرسل زر الإرسال الأول بيانات النموذج بالترميز الافتراضي، بينما يرسل زر الإرسال الثاني البيانات مع الترميز “multipart/form-data”:

<form action="/action_page_binary.asp" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

سمة formmethod

تحدد سمة formmethod طريقة HTTP لإرسال بيانات النموذج إلى عنوان URL المحدد في action.

لاحظ أن هذه السمة تتجاوز سمة method الخاصة بعنصر النموذج (<form>).

تعمل سمة formmethod مع نوعي الإدخال التاليين: submit و image.

يمكن إرسال بيانات النموذج كمتغيرات في عنوان URL (method=”get”) أو كمعاملة HTTP post (method=”post”).

ملاحظات حول طريقة “get”:

• تضيف هذه الطريقة بيانات النموذج إلى عنوان URL في أزواج الاسم/القيمة.
• تعتبر هذه الطريقة مفيدة لإرسال النماذج حيث يرغب المستخدم في إنشاء إشارة مرجعية للنتيجة.
• هناك حد لمقدار البيانات التي يمكنك وضعها في عنوان URL (يختلف بين المتصفحات)، لذلك، لا يمكنك التأكد من نقل جميع بيانات النموذج بشكل صحيح.
• لا تستخدم أبدًا طريقة “get” لتمرير معلومات حساسة! (ستكون كلمة المرور أو غيرها من المعلومات الحساسة مرئية في شريط عنوان المتصفح).

ملاحظات حول طريقة “post”:

• ترسل هذه الطريقة بيانات النموذج كمعاملة HTTP post.
• لا يمكن إنشاء إشارات مرجعية لإرسالات النماذج باستخدام طريقة “post”.
• تعتبر طريقة “post” أكثر قوة وأمانًا من طريقة “get”، كما أنها لا تضع قيودًا على حجم البيانات.

مثال:

نموذج يحتوي على زري إرسال. يرسل زر الإرسال الأول بيانات النموذج باستخدام method=”get”، بينما يرسل زر الإرسال الثاني البيانات باستخدام method=”post”:

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit using GET">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

سمة formtarget

تحدد سمة formtarget اسمًا أو كلمة رئيسية تشير إلى مكان عرض الاستجابة التي يتم تلقيها بعد إرسال النموذج.

لاحظ أن هذه السمة تتجاوز سمة target الخاصة بعنصر النموذج (<form>).

تعمل سمة formtarget مع نوعي الإدخال التاليين: submit و image.

مثال

نموذج يحتوي على زري إرسال، ولكل منهما نافذة هدف مختلفة:

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>

سمة formnovalidate

تحدد سمة formnovalidate أنه لا ينبغي التحقق من صحة عنصر الإدخال (<input>) عند إرسال النموذج.

لاحظ أن هذه السمة تتجاوز سمة novalidate الخاصة بعنصر النموذج (<form>).

تعمل سمة formnovalidate مع نوع الإدخال التالي: submit.

مثال

نموذج يحتوي على زري إرسال (مع التحقق من الصحة وبدونه):

<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formnovalidate="formnovalidate"
  value="Submit without validation">
</form>

سمة novalidate

سمة novalidate هي سمة خاصة بعنصر النموذج (<form>).

عند وجود هذه السمة، تحدد أنه لا ينبغي التحقق من صحة أي من بيانات النموذج عند إرساله.

مثال

تحديد أنه لا ينبغي التحقق من صحة أي بيانات نموذج عند الإرسال:

<form action="/action_page.php" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

عناصر النموذج (Form) والإدخال (Input) في HTML