عناصر النماذج المتقدمة في HTML

الدرس 13 من 17 · HTML

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

أنواع أخرى من input

النوع	ماذا يُظهر؟
`type="tel"`	حقل رقم هاتف، ويفتح لوحة الأرقام على الموبايل
`type="url"`	حقل رابط، ويتحقق أنه يبدأ بمثل `https://`
`type="search"`	حقل بحث، وفيه غالباً زر صغير لمسح النص
`type="time"`	منتقي وقت بالساعات والدقائق
`type="color"`	مربع يفتح لوحة لاختيار لون
`type="range"`	شريط تمرير لاختيار قيمة بين حدّين
`type="file"`	زر لاختيار ملف من جهاز المستخدم

<label for="phone">رقم الهاتف</label>
<input type="tel" id="phone" name="phone">

<label for="fav">لونك المفضل</label>
<input type="color" id="fav" name="fav" value="#5b5bf0">

شريط التمرير: range

<label for="volume">مستوى الصوت</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="10" value="50">

min و max: أقل قيمة وأكبر قيمة.
step: مقدار القفزة مع كل حركة. هنا تتغير القيمة عشرة عشرة.
value: القيمة التي يبدأ بها الشريط.

والخاصية step تعمل أيضاً مع type="number". فالقيمة step="0.5" مثلاً تسمح بأنصاف الأعداد.

رفع الملفات: file

<label for="photo">صورتك الشخصية</label>
<input type="file" id="photo" name="photo" accept="image/*">

<label for="docs">مستنداتك</label>
<input type="file" id="docs" name="docs" accept=".pdf" multiple>

accept: أنواع الملفات التي تظهر للمستخدم عند الاختيار. القيمة image/* تعني أي صورة، و .pdf ملفات PDF فقط.
multiple: تسمح باختيار أكثر من ملف.

اقتراحات أثناء الكتابة: datalist

<datalist> قائمة اقتراحات تظهر تحت الحقل والمستخدم يكتب. وهو غير ملزم بها، فيستطيع أن يكتب قيمة أخرى:

<label for="city">المدينة</label>
<input type="text" id="city" name="city" list="cities">

<datalist id="cities">
  <option value="القاهرة">
  <option value="الإسكندرية">
  <option value="الرياض">
  <option value="عمّان">
</datalist>

الربط يتم بين الخاصية list في الحقل و id في القائمة. والفرق بينه وبين <select> أن select يجبرك على اختيار واحد من الموجود، و datalist يقترح فقط.

تجميع الحقول: fieldset و legend

النموذج الطويل يتعب العين. قسّمه إلى مجموعات لها عناوين:

<fieldset>
  <legend>بيانات الشحن</legend>

  <label for="address">العنوان</label>
  <input type="text" id="address" name="address">

  <label for="zip">الرمز البريدي</label>
  <input type="text" id="zip" name="zip">
</fieldset>

<fieldset> يرسم إطاراً حول الحقول المترابطة.
<legend> عنوان هذه المجموعة.

تخيّل استمارة ورقية حكومية: فيها مربع «البيانات الشخصية»، ومربع «بيانات السكن». هذا التقسيم يريح من يملأ الاستمارة، وقارئ الشاشة ينطق عنوان المجموعة قبل حقولها.

وأهم مكان لهما مع أزرار radio، لأن legend يحمل نص السؤال نفسه:

<fieldset>
  <legend>طريقة الدفع</legend>
  <input type="radio" id="cash" name="pay" value="cash"> <label for="cash">نقداً</label>
  <input type="radio" id="card" name="pay" value="card"> <label for="card">بطاقة</label>
</fieldset>

تجميع خيارات القائمة: optgroup

<select name="course">
  <optgroup label="تطوير الويب">
    <option>HTML</option>
    <option>CSS</option>
  </optgroup>
  <optgroup label="الموبايل">
    <option>Flutter</option>
  </optgroup>
</select>

خصائص تتحكم في الحقل

الخاصية	تأثيرها
`disabled`	الحقل معطّل: لا يُعدَّل ولا تُرسَل قيمته
`readonly`	الحقل للقراءة فقط: لا يُعدَّل لكن قيمته تُرسَل
`autofocus`	المؤشر يقف في هذا الحقل عند فتح الصفحة
`checked`	مربع الاختيار أو زر `radio` مُحدَّد مسبقاً
`selected`	الخيار المحدَّد مسبقاً في `select`
`autocomplete`	نوع البيانات ليقترحها المتصفح، مثل `email` و `name` و `tel`
`pattern`	شكل النص المقبول

<input type="text" name="username" value="sara_2026" readonly>
<input type="text" name="coupon" disabled>
<input type="email" name="email" autocomplete="email">
<input type="text" name="code" pattern="[0-9]{4}" title="أربعة أرقام">

القيمة [0-9]{4} في pattern تعني «أربعة أرقام بالضبط». هذه الصيغة تسمى التعبيرات النمطية، ويكفيك الآن أن تعرف أنها موجودة. واكتب معها title دائماً، لأن المتصفح يعرض نصه للمستخدم عندما يخطئ.

أنواع الأزرار

الكتابة	الوظيفة
`<button type="submit">`	يرسل النموذج. وهو النوع الافتراضي داخل `form`
`<button type="reset">`	يعيد كل الحقول إلى قيمها الأولى
`<button type="button">`	لا يفعل شيئاً وحده، وتربطه بـ JavaScript

جرّب بنفسك

حرّك الشريط، واختر لوناً، واكتب حرفاً في حقل المدينة لترى الاقتراحات. ثم أضف مجموعة fieldset ثانية بعنوان «التواصل» فيها حقل هاتف من نوع tel:

جرّب بنفسكHTML

<form>
  <fieldset>
    <legend>إعدادات الملف الشخصي</legend>

<p>
      <label for="city">المدينة</label><br>
      <input type="text" id="city" name="city" list="cities">
      <datalist id="cities">
        <option value="القاهرة">
        <option value="الإسكندرية">
        <option value="الرياض">
      </datalist>
    </p>

<p>
      <label for="color">لون الصفحة</label><br>
      <input type="color" id="color" name="color" value="#5b5bf0">
    </p>

<p>
      <label for="user">اسم المستخدم</label><br>
      <input type="text" id="user" name="user" value="sara_2026" readonly>
    </p>
  </fieldset>

<fieldset>
    <legend>اللغة المفضلة</legend>
    <input type="radio" id="ar" name="lang" value="ar" checked> <label for="ar">العربية</label>
    <input type="radio" id="en" name="lang" value="en"> <label for="en">English</label>
  </fieldset>

<p><button type="reset">إعادة ضبط</button></p>
</form>

أو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

الخلط بين disabled و readonly: قيمة الحقل المعطّل بـ disabled لا تصل إلى الخادم أبداً. إذا أردت عرض قيمة ثابتة وإرسالها فاستخدم readonly.
نسيان type في الزر: أي <button> داخل form يرسل النموذج. إذا كان الزر لشيء آخر فاكتب type="button".
الاعتماد على تحقق المتصفح وحده: required و pattern تساعد المستخدم، لكن أي شخص يستطيع تجاوزها. الفحص الحقيقي يتم على الخادم.

اختبر نفسك

سؤال

ما الفرق بين datalist و select؟

سؤال

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

الخلاصة

للحقل أنواع كثيرة: tel و url و search و time و color و range و file.
datalist يقترح قيماً لحقل النص دون أن يُلزم المستخدم بها.
fieldset و legend يقسمان النموذج إلى مجموعات واضحة.
disabled تعطّل الحقل ولا ترسله، و readonly تمنع تعديله وترسله.
حدّد type لكل زر: submit أو reset أو button.

عن مدرسة البرمجة

مدرسة البرمجة موقع عربي مجاني لتعليم البرمجة من الصفر، بدروس منظمة وأمثلة تجربها بنفسك. هدفنا أن يتعلم كل عربي البرمجة بلغته، خطوة بخطوة.