النماذج في HTML: أنواع input وlabel وselect وtextarea وrequired والتحقق المدمج

form وlabel وname

يجمع <form> الحقول ويرسلها عند الإرسال. وتحدد action وجهة البيانات، وmethod طريقة إرسالها: get تضعها في العنوان (مناسبة للبحث)، وpost ترسلها في جسم الطلب (استخدمها لكل ما يغيّر البيانات أو كان خاصاً). وبدون action يُرسل النموذج إلى الصفحة الحالية.

كل حقل يحتاج إلى تسمية. فـ <label for="email">Email</label> يرتبط بـ <input id="email">. وعند النقر على التسمية يُفعَّل الحقل (هدف لمس أكبر على الهواتف)، وتقرأ قارئات الشاشة التسمية عند الوصول إلى الحقل. والنص التوضيحي placeholder ليس تسمية، فهو يختفي عند الكتابة وغالباً ما يكون باهتاً يصعب قراءته.

وname هو المفتاح الذي يرسله المتصفح مع القيمة، مثل email=ali@example.com. والحقل الذي لا يحمل name لا يُرسل أبداً، وهذا سبب شائع لمشكلة "النموذج لا يرسل شيئاً". وفي المحرر أدناه، يعرض الإرسال البيانات في وحدة التحكم.

أنواع الحقول والاختيارات

تغيّر السمة type لوحة المفاتيح وطريقة التحقق. فـ email تعرض زر @ وتتحقق من الصيغة، وtel تعرض لوحة أرقام، وnumber لا تقبل إلا الأرقام (مع min وmax وstep)، وurl تتحقق من عنوان الويب، وdate تفتح منتقي التاريخ، وpassword تخفي الأحرف. وتوجد أيضاً search وcolor وrange وtime وfile.

لاختيار واحد من قائمة قصيرة استخدم أزرار الاختيار radio التي تشترك في name واحد، ولعدة اختيارات استخدم مربعات الاختيار checkbox. واجمعها داخل <fieldset> مع <legend> يطرح السؤال، لتقرأ قارئة الشاشة "التوصيل: عادي، زر اختيار". وللقوائم الطويلة مثل الدول استخدم <select> مع عناصر <option>.

والسمة autocomplete مثل autocomplete="email" أو "tel" تسمح للمتصفحات بتعبئة البيانات المحفوظة. وهي تجعل النماذج أسرع بكثير على الهواتف، وجزء من إرشادات الوصول WCAG.

التحقق المدمج، ولماذا يجب أن يتحقق الخادم أيضاً

تمنع required الإرسال الفارغ، وتحدد minlength وmaxlength طول النص، وmin وmax حدود الأرقام والتواريخ، وتأخذ pattern تعبيراً نمطياً مثل pattern="[0-9]{6}" لرمز من ستة أرقام. ويعرض المتصفح رسالته الخاصة بلغة الزائر ويركّز على أول حقل خاطئ.

لكن تحقق المتصفح للراحة فقط. فأي شخص يستطيع تعطيله أو إرسال البيانات إلى خادمك مباشرة دون النموذج. لذلك يجب التحقق من كل قاعدة مرة أخرى على الخادم قبل حفظ البيانات أو العمل بها، وتشرح دورتا Node.js والأمان كيفية ذلك.

استخدم <button type="submit"> للإجراء الرئيسي. والزر <button> داخل النموذج يرسله افتراضياً، لذا يحتاج الزر الذي يفعل شيئاً آخر، مثل "إظهار كلمة المرور"، إلى type="button".

أخطاء شائعة

• النص التوضيحي بدلاً من التسمية

  الحقل الذي فيه نص توضيحي فقط لا يملك تسمية دائمة. فينسى الناس غرض المربع بعد الكتابة، وقد لا تعلنه قارئات الشاشة. أضف <label> دائماً.

• نسيان name

  الحقول التي لا تحمل name تُستبعد بصمت من البيانات المرسلة. راقب وحدة التحكم في المحرر أعلاه لترى ذلك.

• الثقة بتحقق المتصفح

  يمكن تجاوز required وpattern في ثوانٍ. تحقق مرة أخرى على الخادم في كل مرة.

تمرين

أنشئ نموذج حجز: حقل اسم إلزامي وحقل بريد (type="email")، ولكل منهما label مطابق، ثم fieldset فيه legend وزرا اختيار يشتركان في name واحد، وزر إرسال. وكل حقل يحتاج إلى name.

<form method="post">
  <p><label for="n">Name</label><br>
    <input id="n" name="name" required></p>
  <p><label for="e">Email</label><br>
    <input id="e" name="email" type="email" required></p>
  <fieldset>
    <legend>Session</legend>
    <label><input type="radio" name="session" value="morning" required> Morning</label>
    <label><input type="radio" name="session" value="evening"> Evening</label>
  </fieldset>
  <button type="submit">Book</button>
</form>

اختبار سريع

أسئلة يطرحها الناس

المصادر

روجعت المعلومات في هذا الدرس وفق هذه الصفحات الرسمية بتاريخ 20 أكتوبر 2026.

• MDN: Your first form
• MDN: The input element
• MDN: Client-side form validation
• W3C WAI: Forms tutorial

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