أربعة عناصر للاختيار من قائمة:
<select>: قائمة منسدلة • name: اسم البيانات المُرسَلة • multiple: اختيار أكثر من عنصر • size: عدد الخيارات الظاهرة • required: اختيار إلزامي
<option>: خيار واحد • value: القيمة المُرسَلة (إلزامية للبيانات الصحيحة) • selected: محدد مسبقاً • disabled: معطّل
<optgroup>: مجموعة خيارات • label: اسم المجموعة (يُعرض كعنوان)
<datalist>: قائمة اقتراحات لـ input • يختلف عن select — المستخدم يكتب أو يختار • يرتبط بـ input بصفة list=id
| 1 | <!-- select بسيط --> |
| 2 | <label for="country">الدولة</label> |
| 3 | <select id="country" name="country" required> |
| 4 | <option value="">-- اختر الدولة --</option> |
| 5 | <option value="eg">مصر</option> |
| 6 | <option value="sa">السعودية</option> |
| 7 | <option value="ae" selected>الإمارات</option> |
| 8 | </select> |
| 9 | |
| 10 | <!-- select مع optgroup --> |
| 11 | <select name="course"> |
| 12 | <optgroup label="الواجهة الأمامية"> |
| 13 | <option value="html">HTML</option> |
| 14 | <option value="css">CSS</option> |
| 15 | <option value="js">JavaScript</option> |
| 16 | </optgroup> |
| 17 | <optgroup label="الخادم"> |
| 18 | <option value="nodejs">Node.js</option> |
| 19 | <option value="python">Python</option> |
| 20 | </optgroup> |
| 21 | </select> |
| 22 | |
| 23 | <!-- datalist: اقتراحات مع إدخال حر --> |
| 24 | <label for="framework">الإطار المفضل</label> |
| 25 | <input list="frameworks" id="framework" name="framework"> |
| 26 | <datalist id="frameworks"> |
| 27 | <option value="React"> |
| 28 | <option value="Vue"> |
| 29 | <option value="Angular"> |
| 30 | <option value="Svelte"> |
| 31 | <option value="Next.js"> |
| 32 | </datalist> |
مثال 1: نموذج تسجيل متقدم
| 1 | <form> |
| 2 | <!-- اختيار المستوى --> |
| 3 | <label for="level">مستواك في البرمجة</label> |
| 4 | <select id="level" name="level" required> |
| 5 | <option value="">اختر مستواك</option> |
| 6 | <option value="beginner">مبتدئ — أبدأ من الصفر</option> |
| 7 | <option value="intermediate">متوسط — لدي خبرة بسيطة</option> |
| 8 | <option value="advanced">متقدم — أريد تعميق المعرفة</option> |
| 9 | </select> |
| 10 | |
| 11 | <!-- اختيار لغات متعددة --> |
| 12 | <label for="langs">اللغات التي تعرفها (اختر أكثر من واحدة)</label> |
| 13 | <select id="langs" name="langs" multiple size="5"> |
| 14 | <optgroup label="الويب"> |
| 15 | <option value="html">HTML</option> |
| 16 | <option value="css">CSS</option> |
| 17 | <option value="js">JavaScript</option> |
| 18 | </optgroup> |
| 19 | <optgroup label="الخادم"> |
| 20 | <option value="python">Python</option> |
| 21 | <option value="nodejs">Node.js</option> |
| 22 | <option value="php">PHP</option> |
| 23 | </optgroup> |
| 24 | </select> |
| 25 | |
| 26 | <!-- بحث مع اقتراحات --> |
| 27 | <label for="city">المدينة</label> |
| 28 | <input list="cities" id="city" name="city" placeholder="ابدأ بالكتابة..."> |
| 29 | <datalist id="cities"> |
| 30 | <option value="القاهرة"> |
| 31 | <option value="الإسكندرية"> |
| 32 | <option value="الجيزة"> |
| 33 | <option value="الرياض"> |
| 34 | <option value="جدة"> |
| 35 | <option value="دبي"> |
| 36 | </datalist> |
| 37 | </form> |