📝 بناء النماذج التفاعلية في HTML: دليل المبتدئين الشامل

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

🔍 ما هي النماذج (Forms)؟

النماذج هي عناصر HTML تتيح للمستخدمين إدخال معلومات وإرسالها إلى الخادم. تخيلها كاستمارة ورقية رقمية! كل نموذج يتكون من:

  • حقول إدخال (مربعات نص، خيارات، أزرار)
  • تسميات لشرح ما يجب إدخاله
  • زر إرسال لإكامل العملية
<!-- مثال بسيط لنموذج -->
<form>
    <label for="name">الاسم:</label>
    <input type="text" id="name" name="name">
    <button type="submit">إرسال</button>
</form>

🏗️ العنصر <form>: أساس كل نموذج

يبدأ كل نموذج بعنصر <form> الذي يعمل كحاوية لجميع عناصر الإدخال. له خاصيتان رئيسيتان:

  • action: يحدد عنوان URL الذي سيتم إرسال البيانات إليه
  • method: يحدد طريقة الإرسال (GET أو POST)
<form action="/submit-form" method="POST">
    <!-- عناصر النموذج ستكون هنا -->
</form>

✏️ عناصر الإدخال الأساسية

1. حقل النص (<input type="text">)

أكثر العناصر استخداماً لإدخال النصوص القصيرة مثل الأسماء والعناوين.

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

2. حقل كلمة المرور (<input type="password">)

يخفي النص المدخل بأعلام النجمة (*) للأمان.

<label for="password">كلمة المرور:</label>
<input type="password" id="password" name="password">

3. زر الإرسال (<button type="submit">)

يرسل البيانات إلى الخادم عند النقر عليه.

<button type="submit">تسجيل الدخول</button>

📋 عناصر النماذج المتقدمة

المربع النصي الكبير (<textarea>)

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

<label for="message">الرسالة:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

القائمة المنسدلة (<select>)

تتيح للمستخدم اختيار خيار من قائمة.

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

خيارات الاختيار (<input type="radio">)

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

<label>الجنس:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">ذكر</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">أنثى</label>

🎯 مثال عملي: نموذج اتصال متكامل

لنطبق ما تعلمناه في نموذج اتصال بسيط:

<form action="/contact" method="POST">
    <h3>اتصل بنا</h3>
    
    <label for="fullname">الاسم الكامل:</label>
    <input type="text" id="fullname" name="fullname" required>
    
    <label for="email">البريد الإلكتروني:</label>
    <input type="text" id="email" name="email" required>
    
    <label for="subject">الموضوع:</label>
    <select id="subject" name="subject">
        <option value="general">استفسار عام</option>
        <option value="support">دعم فني</option>
        <option value="complaint">شكوى</option>
    </select>
    
    <label for="message">الرسالة:</label>
    <textarea id="message" name="message" rows="5" required></textarea>
    
    <button type="submit">إرسال الرسالة</button>
</form>

💡 نصائح مهمة لتحسين النماذج

  1. استخدم <label> دائماً لتحسين إمكانية الوصول وسهولة الاستخدام
  2. أضف خاصية required للحقول الإلزامية
  3. اجعل النماذج بسيطة وواضحة للمستخدم
  4. اختبر النموذج على أجهزة مختلفة