النماذج: الهيكل والتسميات ومجموعات الحقول

ما هي نماذج HTML؟

النماذج هي الطريقة التي يرسل بها المستخدمون البيانات الى الخادم. كل صفحة تسجيل دخول وشريط بحث ونموذج اتصال تعتمد على عنصر <form>. يجمع النموذج المدخلات من خلال حقول نصية وقوائم منسدلة وازرار ثم يرسلها للمعالجة. في هذا الدرس ستتعلم بناء نماذج سهلة الوصول باستخدام التسميات الصحيحة ومجموعات الحقول.

عنصر form: السمتان action و method

عنصر <form> يغلف جميع عناصر التحكم. سمة action تحدد وجهة البيانات، و method تحدد طريقة النقل. هناك طريقتان:

• GET -- تلحق بيانات النموذج بعنوان URL كمعاملات استعلام (مثلا ?search=html). استخدم GET للبحث والتصفية -- الحالات التي يجب ان يكون فيها العنوان قابلا للمشاركة والحفظ. البيانات مرئية في شريط العناوين ومحدودة الطول.
• POST -- ترسل بيانات النموذج في جسم طلب HTTP مخفية عن العنوان. استخدم POST لنماذج تسجيل الدخول والتسجيل واي نموذج يعدل البيانات على الخادم. لا يوجد حد للحجم والبيانات غير مرئية في سجل المتصفح.

<!-- نموذج بحث باستخدام GET -->
<form action="/search" method="GET">
  <label for="query">البحث:</label>
  <input type="text" id="query" name="query">
  <button type="submit">بحث</button>
</form>

<!-- نموذج اتصال باستخدام POST -->
<form action="/contact" method="POST">
  <label for="email">البريد الالكتروني:</label>
  <input type="text" id="email" name="email">
  <button type="submit">ارسال</button>
</form>

التسميات: اهم ميزة لامكانية الوصول

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

التسميات الصريحة تستخدم سمة for التي تطابق id حقل الادخال. هذه الطريقة المفضلة لانها تعمل حتى بدون تجاور.

التسميات الضمنية تغلف حقل الادخال داخل عنصر التسمية بدون حاجة لسمات for او id.

<!-- تسمية صريحة (مفضلة) -->
<label for="username">اسم المستخدم:</label>
<input type="text" id="username" name="username">

<!-- تسمية ضمنية -->
<label>
  كلمة المرور:
  <input type="text" id="password" name="password">
</label>

تجميع عناصر التحكم مع fieldset و legend

عندما يحتوي النموذج على مجموعات متعددة من حقول الادخال المرتبطة، استخدم <fieldset> لتجميعها و <legend> لاعطاء كل مجموعة عنوانا. هذا مهم بشكل خاص لازرار الاختيار ومربعات الاختيار حيث تشترك حقول ادخال متعددة في سؤال مشترك. تعلن قارئات الشاشة عن العنوان قبل كل حقل ادخال في المجموعة حتى يفهم المستخدمون السياق.

<form action="/survey" method="POST">
  <fieldset>
    <legend>المعلومات الشخصية</legend>
    <label for="fullname">الاسم الكامل:</label>
    <input type="text" id="fullname" name="fullname">

    <label for="user-email">البريد الالكتروني:</label>
    <input type="text" id="user-email" name="email">
  </fieldset>

  <fieldset>
    <legend>طريقة التواصل المفضلة</legend>
    <label>
      <input type="radio" name="contact" value="email"> البريد الالكتروني
    </label>
    <label>
      <input type="radio" name="contact" value="phone"> الهاتف
    </label>
    <label>
      <input type="radio" name="contact" value="mail"> البريد
    </label>
  </fieldset>

  <button type="submit">ارسال الاستبيان</button>
</form>

Textarea: حقل النص متعدد الاسطر

عنصر <textarea> ينشئ حقل نص متعدد الاسطر للتعليقات والرسائل والاوصاف. على عكس <input> فهو ليس ذاتي الاغلاق -- النص بين الوسمين يصبح القيمة الافتراضية. استخدم rows و cols للحجم الاولي.

Select و Option و Optgroup: القوائم المنسدلة

عنصر <select> ينشئ قائمة منسدلة. كل خيار هو عنصر <option>. للقوائم الطويلة جمع الخيارات المرتبطة بواسطة <optgroup>. سمة value ترسل للخادم بينما النص هو ما يراه المستخدم.

<form action="/feedback" method="POST">
  <label for="department">القسم:</label>
  <select id="department" name="department">
    <option value="">-- اختر قسما --</option>
    <optgroup label="الهندسة">
      <option value="frontend">الواجهة الامامية</option>
      <option value="backend">الواجهة الخلفية</option>
    </optgroup>
    <optgroup label="التصميم">
      <option value="ui">تصميم واجهة المستخدم</option>
      <option value="ux">بحث تجربة المستخدم</option>
    </optgroup>
  </select>

  <label for="comments">التعليقات:</label>
  <textarea id="comments" name="comments" rows="5" cols="40"></textarea>

  <button type="submit">ارسال الملاحظات</button>
</form>

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

عنصر <button> له ثلاثة انواع تتحكم في سلوكه:

• type="submit" -- يرسل بيانات النموذج الى الخادم. هذا هو النوع الافتراضي اذا لم يتم تحديد نوع.
• type="reset" -- يمسح جميع حقول النموذج ويعيدها الى قيمها الافتراضية. استخدم هذا بحذر لان المستخدمين نادرا ما يريدون مسح كل ما كتبوه.
• type="button" -- لا يفعل شيئا افتراضيا. استخدم هذا للاجراءات المدفوعة بـ JavaScript التي لا يجب ان ترسل او تعيد تعيين النموذج.

انماط تخطيط النماذج

نماذج HTML ليس لها تخطيط مدمج -- التسميات والحقول تظهر في سطر واحد افتراضيا. استخدم <div> حول كل زوج تسمية-حقل ونسقها بواسطة CSS. التخطيط المكدس ابسط ويعمل افضل على المحمول.

<style>
  .form-group {
    margin-bottom: 16px;
  }
  .form-group label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
  }
  .form-group input,
  .form-group textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
  }
</style>

<form action="/register" method="POST">
  <div class="form-group">
    <label for="name">الاسم الكامل:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-group">
    <label for="bio">نبذة:</label>
    <textarea id="bio" name="bio" rows="3"></textarea>
  </div>
  <button type="submit">تسجيل</button>
</form>