دورة HTML: الدرس الثالث

مرحبًا بك في الدرس الثالث من دورتنا الشاملة لتعلم لغة HTML! بعد أن تعلمنا كيفية تنظيم المحتوى باستخدام العناوين، الفقرات، القوائم، والجداول، حان الوقت الآن لنتعلم كيفية التفاعل مع المستخدمين وجمع البيانات منهم. هذا هو الدور الأساسي لـ النماذج (Forms) في HTML.

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

ما هي النماذج في HTML؟

النموذج في HTML هو قسم من المستند يحتوي على عناصر تفاعلية تسمح للمستخدم بإدخال البيانات. هذه البيانات يمكن إرسالها إلى خادم الويب للمعالجة. يتم تعريف النموذج باستخدام وسم <form>.

مثال على نموذج بسيط

<h3>نموذج تسجيل دخول بسيط</h3>
<form action="/login" method="post">
  <label for="username">اسم المستخدم:</label><br>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">كلمة المرور:</label><br>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="تسجيل الدخول">
</form>

ملاحظة: <label> يُستخدم لربط نص بوحدة تحكم النموذج (مثل حقل الإدخال). السمة for في <label> يجب أن تتطابق مع السمة id في عنصر النموذج المرتبط. هذا مهم للوصولية.

أنواع حقول الإدخال (Input Types)

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

1. حقول النص (Text Fields)

<h3>أنواع حقول النص</h3>
<form>
  <label for="name">الاسم:</label><br>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">البريد الإلكتروني:</label><br>
  <input type="email" id="email" name="email"><br><br>

  <label for="age">العمر:</label><br>
  <input type="number" id="age" name="age" min="1" max="120"><br><br>

  <label for="website">موقعك:</label><br>
  <input type="url" id="website" name="website"><br><br>
</form>

2. أزرار الاختيار (Radio Buttons)

تُستخدم أزرار الاختيار للسماح للمستخدم باختيار خيار واحد فقط من مجموعة من الخيارات. يجب أن يكون لجميع أزرار الاختيار في المجموعة نفس السمة name.

<h3>اختيار الجنس</h3>
<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">ذكر</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">أنثى</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">أخرى</label>
</form>

3. صناديق الاختيار (Checkboxes)

تُستخدم صناديق الاختيار للسماح للمستخدم باختيار صفر أو أكثر من الخيارات من مجموعة. كل صندوق اختيار له سمة name و value خاصة به.

<h3>اختيار الهوايات</h3>
<form>
  <input type="checkbox" id="reading" name="hobby" value="reading">
  <label for="reading">القراءة</label><br>
  <input type="checkbox" id="sports" name="hobby" value="sports">
  <label for="sports">الرياضة</label><br>
  <input type="checkbox" id="music" name="hobby" value="music">
  <label for="music">الموسيقى</label>
</form>

4. أزرار الإرسال (Submit Buttons)

يُستخدم زر الإرسال لتقديم بيانات النموذج إلى الخادم. يتم تعريفه باستخدام <input type="submit">.

<h3>زر إرسال</h3>
<form action="/submit_form" method="post">
  <input type="text" name="data" placeholder="أدخل بياناتك"><br><br>
  <input type="submit" value="إرسال النموذج">
</form>

5. أزرار إعادة الضبط (Reset Buttons)

يُستخدم زر إعادة الضبط لمسح جميع البيانات المدخلة في النموذج وإعادتها إلى قيمها الافتراضية. يتم تعريفه باستخدام <input type="reset">.

<h3>زر إعادة ضبط</h3>
<form>
  <input type="text" name="data" placeholder="أدخل بياناتك"><br><br>
  <input type="reset" value="إعادة ضبط">
</form>

عناصر النموذج الأخرى

بالإضافة إلى <input>، هناك العديد من العناصر الأخرى التي تُستخدم في النماذج:

1. مساحات النص (Textareas) - <textarea>

تُستخدم مساحات النص لإدخال نصوص متعددة الأسطر (مثل التعليقات أو الرسائل الطويلة).

<h3>مساحة نص</h3>
<form>
  <label for="comment">تعليقك:</label><br>
  <textarea id="comment" name="comment" rows="5" cols="40"></textarea>
</form>

2. القوائم المنسدلة (Dropdown Lists) - <select> و <option>

تُستخدم القوائم المنسدلة للسماح للمستخدم باختيار خيار واحد أو أكثر من قائمة محددة مسبقًا.

<h3>اختيار المدينة</h3>
<form>
  <label for="city">اختر مدينتك:</label><br>
  <select id="city" name="city">
    <option value="cairo">القاهرة</option>
    <option value="riyadh">الرياض</option>
    <option value="dubai">دبي</option>
  </select>
</form>

3. مجموعات الحقول (Fieldsets) ووسوم التسمية (Legends) - <fieldset> و <legend>

تُستخدم <fieldset> لتجميع العناصر ذات الصلة في النموذج، و <legend> لتوفير تسمية لمجموعة الحقول.

<h3>معلومات الاتصال</h3>
<form>
  <fieldset>
    <legend>معلومات الاتصال</legend>
    <label for="fname">الاسم الأول:</label><br>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">الاسم الأخير:</label><br>
    <input type="text" id="lname" name="lname"><br><br>
  </fieldset>
</form>

خلاصة الدرس الثالث

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

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

لا تتردد في تجربة أنواع مختلفة من حقول الإدخال، ودمجها في نماذجك الخاصة. الممارسة هي أفضل معلم!

دورة HTML الشاملة: الدرس الثالث

النماذج (Forms) في HTML: جمع البيانات من المستخدمين