النماذج - الجزء الثاني — أساسيات HTML

النماذج — الجزء الثاني

مربعات الاختيار (checkbox)

لخيارات مستقلة، يمكن تحديد أي عدد منها:

<fieldset>
    <legend>المواضيع التي تهمك</legend>
    <label><input type="checkbox" name="topics" value="web"> تطوير الويب</label>
    <label><input type="checkbox" name="topics" value="ai" checked> الذكاء الاصطناعي</label>
    <label><input type="checkbox" name="topics" value="security"> الأمن السيبراني</label>
</fieldset>

- value هو ما يُرسل (بدونه يُرسل "on").

- checked محدد مسبقاً.

- المربع غير المحدد لا يُرسل إطلاقاً.

أزرار الراديو (radio)

لاختيار واحد فقط من مجموعة. ما يجعلها مجموعة هو نفس name:

<fieldset>
    <legend>مستوى خبرتك</legend>
    <label><input type="radio" name="level" value="beginner" required> مبتدئ</label>
    <label><input type="radio" name="level" value="intermediate"> متوسط</label>
    <label><input type="radio" name="level" value="advanced"> متقدم</label>
</fieldset>

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

- required على زر واحد من المجموعة يكفي.

fieldset و legend

يجمعان الحقول المترابطة، و <legend> هو سؤال المجموعة. بدونهما يسمع مستخدم قارئ الشاشة "مبتدئ، زر اختيار" دون أن يعرف ما السؤال. استخدمهما دائماً مع مجموعات radio و checkbox.

ربط آخر للـ label: وضع الحقل داخل <label> (كما أعلاه) يغني عن for و id.

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

<label for="city">المدينة</label>
<select id="city" name="city" required>
    <option value="">— اختر —</option>
    <optgroup label="الوسط">
        <option value="baghdad">بغداد</option>
        <option value="karbala">كربلاء</option>
    </optgroup>
    <optgroup label="الجنوب">
        <option value="basra" selected>البصرة</option>
    </optgroup>
</select>

- خيار أول قيمته فارغة مع required يجبر المستخدم على الاختيار.

- multiple يسمح بعدة اختيارات (لكن تجربة استخدامه سيئة؛ checkboxes أوضح غالباً).

radio أم select؟ خيارات قليلة (2–5) ← radio (كلها ظاهرة). خيارات كثيرة ← select.

datalist: اقتراحات مع حرية الكتابة

<label for="lang">لغتك المفضلة</label>
<input type="text" id="lang" name="lang" list="langs">
<datalist id="langs">
    <option value="Python"></option>
    <option value="JavaScript"></option>
    <option value="C++"></option>
</datalist>

أنواع خاصة

| النوع | الاستخدام |

|---|---|

| date / time / datetime-local | منتقي تاريخ ووقت من المتصفح |

| file | رفع ملف: accept="image/*"، و multiple لعدة ملفات |

| range | شريط تمرير بقيمة تقريبية (min max step) |

| color | منتقي لون |

| hidden | قيمة تُرسل ولا تظهر (لا تضع فيها أسراراً: تظهر في المصدر) |

⚠️ رفع الملفات يتطلب أن يكون النموذج: method="post" و enctype="multipart/form-data"، وإلا يُرسل اسم الملف فقط.

disabled مقابل readonly

- readonly: لا يمكن التعديل لكن القيمة تُرسل.

- disabled: لا يمكن التفاعل والقيمة لا تُرسل.

تمرين

أنشئ نموذج "التسجيل في دورة": اختيار الدورة (select بمجموعات)، مستوى الخبرة (radio في fieldset)، أيام الحضور (checkboxes)، تاريخ البدء، ورفع صورة شخصية. تحقق من enctype.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>التسجيل في دورة</title>
</head>
<body>
    <h1>التسجيل في دورة</h1>
    <form action="/enroll" method="post" enctype="multipart/form-data">
        <p>
            <label for="course">الدورة</label>
            <select id="course" name="course" required>
                <option value="">— اختر دورة —</option>
                <optgroup label="الويب">
                    <option value="html">أساسيات HTML</option>
                    <option value="css">تصميم CSS</option>
                </optgroup>
                <optgroup label="البرمجة">
                    <option value="python">Python</option>
                </optgroup>
            </select>
        </p>

        <fieldset>
            <legend>مستوى خبرتك</legend>
            <label><input type="radio" name="level" value="beginner" required> مبتدئ</label>
            <label><input type="radio" name="level" value="intermediate"> متوسط</label>
        </fieldset>

        <fieldset>
            <legend>أيام الحضور</legend>
            <label><input type="checkbox" name="days" value="sun"> الأحد</label>
            <label><input type="checkbox" name="days" value="tue"> الثلاثاء</label>
            <label><input type="checkbox" name="days" value="thu"> الخميس</label>
        </fieldset>

        <p>
            <label for="start">تاريخ البدء</label>
            <input type="date" id="start" name="start">
        </p>
        <p>
            <label for="photo">صورة شخصية</label>
            <input type="file" id="photo" name="photo" accept="image/*">
        </p>
        <button type="submit">تسجيل</button>
    </form>
</body>
</html>