نماذج HTML

النماذج (<form>) هي الطريقة الأساسية التي تتفاعل بها صفحات الويب مع المستخدمين — تسجيل الدخول والتسجيل والبحث ورسائل الاتصال جميعها تعتمد على النماذج لجمع البيانات.

أساسيات النموذج

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

مثال

<form action="/submit" method="post">
<label>اسم المستخدم: <input type="text" name="username"></label>
<label>كلمة المرور: <input type="password" name="password"></label>
<button type="submit">تسجيل الدخول</button>
</form>

عناصر التحكم الشائعة في الإدخال

<input> هو عنصر التحكم الأكثر تنوعًا — سمة type الخاصة به تحوله إلى أشكال إدخال مختلفة:

<!-- إدخال نص -->
### مثال
<input type="text" placeholder="أدخل اسمك">

<!-- بريد إلكتروني -->
<input type="email" placeholder="you@example.com">

<!-- رقم -->
<input type="number" min="1" max="100">

<!-- أزرار اختيار -->
<input type="radio" name="gender" value="male"> ذكر
<input type="radio" name="gender" value="female"> أنثى

<!-- خانة اختيار -->
<input type="checkbox" name="hobby" value="coding"> برمجة

<!-- قائمة منسدلة -->
<select>
<option>اختر مدينة</option>
<option>القاهرة</option>
<option>لندن</option>
</select>

<!-- منطقة نصية -->
<textarea rows="4" placeholder="أدخل رسالتك..."></textarea>

تجميع النموذج والمزيد من العناصر

<fieldset> يجمع عناصر التحكم ذات الصلة، <legend> يوفر عنوانًا للمجموعة. <datalist> يقدم قائمة اقتراحات مسبقة لحقول الإدخال:

<form>
<fieldset>
### مثال
<legend>معلومات شخصية</legend>
<label>الاسم: <input type="text" name="name" list="names"></label>

<label>الجنس:
<input type="radio" name="gender" value="male"> ذكر
<input type="radio" name="gender" value="female"> أنثى
</label>
</fieldset>

<datalist id="names">
<option value="أحمد">
<option value="سارة">
<option value="خالد">
</datalist>

<button type="submit">إرسال</button>
<button type="reset">إعادة تعيين</button>
<button type="button" onclick="alert('لقد نقرت علي!')">زر عادي</button>
</form>

• <fieldset> + <legend>: تجميع عناصر التحكم في النموذج مع عنوان
• <datalist> + <option>: توفير اقتراحات إدخال، تُستخدم مع سمة list
• أنواع <button>: submit يُرسل، reset يُعيد التعيين، button زر عام

❓ أسئلة شائعة

📖 ملخص

• <form> يحدد نموذجًا؛ action و method يتحكمان في سلوك الإرسال
• أنواع <input>: text، password، email، number، radio، checkbox
• <select> + <option> للقوائم المنسدلة؛ <textarea> للنص متعدد الأسطر
• <fieldset> + <legend> للتجميع؛ <datalist> لاقتراحات الإدخال
• نوع <button> يحدد السلوك: submit / reset / button

📝 تمارين

1. نموذج تسجيل: أنشئ صفحة تسجيل باسم المستخدم والبريد الإلكتروني وكلمة المرور وتأكيد كلمة المرور والجنس (radio) والاهتمامات (checkbox) وزر إرسال وزر إعادة تعيين. استخدم <fieldset> للتجميع.
2. اقتراحات الإدخال: استخدم <datalist> لإنشاء إدخال "اختيار مدينة" يقترح تلقائيًا القاهرة ولندن وطوكيو وسيدني أثناء الكتابة.