شرح سمات الفورم لعناصر الإدخال في HTML مع الأمثلة

تعرف على جميع سمات الفورم لعناصر الإدخال في HTML مع شرح عملي وأمثلة

في HTML، عنصر <input> يمكنه أن يحتوي على مجموعة من السمات (Attributes) الخاصة بالفورم (Form Attributes) والتي تمنحك مرونة كبيرة للتحكم في طريقة إرسال البيانات، وجهة الإرسال، ونوع الترميز، وطريقة المعالجة، وحتى التحقق من صحة البيانات. هذه السمات توفر تحكماً إضافياً على مستوى عنصر الإدخال نفسه، ويمكنها في كثير من الحالات تجاوز الإعدادات الموجودة في عنصر <form> الرئيسي.

1- السمة form

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

<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">

2- السمة formaction

السمة formaction تحدد رابط (URL) مختلف لمعالجة البيانات عند إرسال الفورم من خلال زر إرسال معين. تعمل هذه السمة مع نوعي الإدخال submit و image، وتتجاوز قيمة السمة action في الفورم.

<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>

3- السمة formenctype

السمة formenctype تحدد كيفية ترميز بيانات الفورم عند إرسالها، وتستخدم فقط مع الفورم الذي يحتوي على method="post". تعمل مع نوعي الإدخال submit و image، وتتجاوز قيمة السمة enctype في الفورم.

<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>

4- السمة formmethod

تحدد السمة formmethod طريقة إرسال البيانات، إما get أو post. تعمل مع submit و image، وتتجاوز قيمة السمة method في الفورم.

GET: ترسل البيانات كجزء من رابط URL، يمكن حفظها أو مشاركتها، لكن لا تستخدم للمعلومات الحساسة.
POST: ترسل البيانات في جسم الطلب (HTTP body)، أكثر أمانًا ولا تحتوي على قيود حجم البيانات.

<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>

5- السمة formtarget

تحدد السمة 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>

6- السمة formnovalidate

تمنع السمة 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 value="Submit without validation">
</form>

7- السمة novalidate

السمة novalidate توضع على الفورم نفسه، وتمنع التحقق من جميع الحقول عند الإرسال.

<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>

الخلاصة

سمات الفورم لعناصر الإدخال في HTML تمنحك تحكمًا دقيقًا في سلوك إرسال البيانات. يمكنك من خلالها تخصيص وجهة الإرسال، طريقة الترميز، طريقة الإرسال، وحتى التحكم في التحقق من صحة البيانات بشكل منفصل لكل عنصر. فهم هذه السمات واستخدامها بشكل صحيح يساعدك على إنشاء نماذج أكثر مرونة واحترافية.