النماذج في HTML: form و input و label

كل ما تعلمته حتى الآن يسير في اتجاه واحد: الموقع يعرض، والزائر يقرأ. لكن ماذا لو أردت أن يكتب الزائر شيئاً؟ تسجيل الدخول، والبحث، ونموذج «اتصل بنا»، وطلب منتج: كلها نماذج (Forms). في هذا الدرس ستتعلم بناء النماذج بالطريقة الصحيحة والمريحة للمستخدم.

الوسم form

النموذج مثل استمارة ورقية في مكتب حكومي: فيها خانات تملؤها، وزر «إرسال» في آخرها. في HTML، الاستمارة كلها داخل <form>:

<form action="/subscribe" method="post">
  <!-- الحقول هنا -->
</form>

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

من يستقبل البيانات؟

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

حقل الإدخال input و label

أهم وسم في النماذج هو <input>، وهو وسم فارغ يتغير شكله حسب الخاصية type. ومعه دائماً <label> الذي يكتب اسم الحقل:

<label for="username">اسم المستخدم</label>
<input type="text" id="username" name="username">

الربط بين الاثنين يتم بأن تكون قيمة for في الـ label هي نفس id الحقل. لماذا هذا مهم؟

• عند الضغط على النص «اسم المستخدم» ينتقل المؤشر للحقل تلقائياً، وهذا مريح جداً على الموبايل.
• قارئات الشاشة تقرأ اسم الحقل عندما يصل إليه الكفيف.

أما الخاصية name فهي اسم البيانات عند إرسالها. لو كتب الزائر «sara»، يستقبل الخادم username=sara. الحقل الذي ليس له name لا تُرسل قيمته أبداً.

أنواع الحقول

النوع	الاستخدام	ميزة إضافية
type="text"	نص قصير	الافتراضي
type="email"	بريد إلكتروني	يتحقق من وجود @
type="password"	كلمة مرور	يخفي الحروف بنقاط
type="number"	رقم	يمنع الحروف، ويقبل min و max
type="date"	تاريخ	يظهر تقويماً لاختيار اليوم
type="checkbox"	مربع اختيار	يمكن اختيار أكثر من واحد
type="radio"	زر اختيار	اختيار واحد فقط من مجموعة

ميزة رائعة على الموبايل: الحقل من نوع email يُظهر لوحة مفاتيح فيها علامة @، و number يُظهر لوحة الأرقام. اختيار النوع الصحيح يريح المستخدم.

أزرار الاختيار radio و checkbox

أزرار radio التي لها نفس name تصبح مجموعة واحدة، لا يمكن اختيار أكثر من زر فيها، مثل أسئلة الاختيار من متعدد:

<p>مستواك في البرمجة:</p>
<input type="radio" id="beginner" name="level" value="beginner">
<label for="beginner">مبتدئ</label>

<input type="radio" id="middle" name="level" value="middle">
<label for="middle">متوسط</label>

الخاصية value هي ما يُرسل للخادم عند اختيار هذا الزر. أما checkbox فكل مربع مستقل، ويمكن اختيار أي عدد منها.

نص طويل textarea وقائمة منسدلة select

للرسائل الطويلة استخدم <textarea>، وله وسم إغلاق على عكس <input>:

<label for="message">رسالتك</label>
<textarea id="message" name="message" rows="4"></textarea>

ولاختيار عنصر من قائمة طويلة، مثل الدولة، استخدم <select> وبداخله <option>:

<label for="country">الدولة</label>
<select id="country" name="country">
  <option value="eg">مصر</option>
  <option value="sa">السعودية</option>
  <option value="ma">المغرب</option>
</select>

زر الإرسال

<button type="submit">إرسال</button>

الضغط عليه يرسل النموذج إلى العنوان المكتوب في action. والضغط على Enter داخل أي حقل نصي يفعل الشيء نفسه.

التحقق التلقائي من البيانات

يمكنك أن تطلب من المتصفح فحص البيانات قبل الإرسال، دون أي سطر JavaScript:

<input type="email" id="email" name="email" required placeholder="[email protected]">
<input type="number" id="age" name="age" min="13" max="99">
<input type="text" id="code" name="code" minlength="4" maxlength="8">

• required: الحقل إجباري، ولن يُرسل النموذج وهو فارغ.
• min و max: أصغر وأكبر رقم مسموح.
• minlength و maxlength: أقل وأكثر عدد من الحروف.
• placeholder: نص رمادي مثال يظهر داخل الحقل الفارغ ويختفي عند الكتابة.

placeholder ليس بديلاً عن label

النص التوضيحي يختفي بمجرد أن يبدأ المستخدم الكتابة، فينسى ماذا كان الحقل يطلب. اكتب <label> دائماً، واستخدم placeholder كمثال إضافي فقط.

جرّب بنفسك

هذا نموذج تسجيل في دورة. املأ الحقول وجرّب الكتابة والاختيار. صندوق التجربة معزول ولا يرسل البيانات فعلياً، لذلك جرّب زر الإرسال والتحقق التلقائي في ملف على جهازك:

جرّب بنفسكHTML

محرر الكود (HTML)<form action="/register" method="post"> <p> <label for="name">الاسم</label><br> <input type="text" id="name" name="name" required> </p> <p> <label for="email">البريد الإلكتروني</label><br> <input type="email" id="email" name="email" placeholder="name@example.com" required> </p> <p> <label for="course">الكورس</label><br> <select id="course" name="course"> <option value="html">HTML</option> <option value="css">CSS</option> <option value="js">JavaScript</option> </select> </p> <p> <input type="checkbox" id="news" name="news"> <label for="news">أرسلوا لي الدروس الجديدة</label> </p> <p> <label for="note">ملاحظات</label><br> <textarea id="note" name="note" rows="3"></textarea> </p> <button type="submit">سجّلني</button> </form>

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• نسيان الخاصية name: الحقل يظهر ويعمل، لكن قيمته لا تصل للخادم أبداً.
• label غير مربوط بالحقل: اختلاف قيمة for عن id يجعل الضغط على الاسم بلا فائدة ويربك قارئات الشاشة.
• أزرار radio بأسماء مختلفة: إذا اختلف name بينها، يستطيع المستخدم اختيار كل الأزرار معاً. المجموعة الواحدة لها name واحد.

اختبر نفسك

سؤال

كيف تربط label بحقل الإدخال الخاص به؟

قيمة for في label تساوي id الحقلقيمة for في label تساوي name الحقلتكتب label بعد الحقل مباشرة فقط

سؤال

تريد أن يختار الطالب إجابة واحدة فقط من أربع إجابات. أي نوع تستخدم؟

textcheckbox بأسماء مختلفةradio بنفس الـ name

الخلاصة

• النموذج داخل <form>، و action وجهة البيانات، و method طريقة الإرسال.
• <input> يتغير بالخاصية type، ومعه دائماً <label> مربوط بـ for و id.
• name اسم البيانات عند الإرسال، و value قيمة الاختيار في radio و checkbox و option.
• <textarea> للنص الطويل، و <select> للقائمة المنسدلة، و <button type="submit"> للإرسال.
• required و min و max و minlength تحقق تلقائي بدون JavaScript.