أهلاً بك يا مهندس/مهندسة! اليوم سنتعلم عن القوائم المنسدلة في HTML. سهلة ومفيدة جداً!
ما هي القائمة المنسدلة؟
ببساطة، هي قائمة خيارات تظهر للمستخدم ليختار منها خياراً واحداً (أو أكثر أحياناً). العنصر الأساسي لها هو <select>.
العناصر الأساسية: <select> و <option>
العنصر <select> هو الحاوية الرئيسية للقائمة المنسدلة، وداخلها نضع عناصر <option>، وكل <option> يمثل خياراً واحداً في القائمة.
مثال بسيط:
هذا كيف تسوي قائمة منسدلة أساسية:
<select name="fruits" id="fruits">
<option value="apple">تفاح</option>
<option value="banana">موز</option>
<option value="orange">برتقال</option>
</select>هنا، name و id مهمين عشان تتعامل معاهم بالـ CSS أو JavaScript أو لما ترسل البيانات للسيرفر.
تحديد خيار افتراضي: selected
إذا تبغى خيار معين يكون هو المختار أول ما تظهر الصفحة، استخدم الخاصية selected داخل الـ <option>.
<select name="cars" id="cars">
<option value="volvo">فولفو</option>
<option value="saab" selected>ساب</option>
<option value="mercedes">مرسيدس</option>
<option value="audi">أودي</option>
</select>تجميع الخيارات: <optgroup>
لو عندك خيارات كثيرة وتبغى ترتبها في مجموعات، استخدم <optgroup>. تعطيه خاصية label عشان تظهر كعنوان للمجموعة.
<select name="program_lang" id="program_lang">
<optgroup label="لغات الواجهة الأمامية">
<option value="js">جافاسكريبت</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="لغات الواجهة الخلفية">
<option value="python">بايثون</option>
<option value="php">PHP</option>
<option value="ruby">روبي</option>
</optgroup>
</select>اختيار عدة خيارات: multiple
أحياناً تحتاج المستخدم يختار أكثر من خيار. ببساطة أضف الخاصية multiple للعنصر <select>.
ملاحظة: لما تستخدم
multiple، القائمة المنسدلة ما راح تظهر كـ "قائمة منسدلة" بالمعنى التقليدي، بل كصندوق قائمة (list box) يمكن للمستخدم الاختيار منه بالنقر مع الضغط علىCtrl(أوCmdفي ماك).
<select name="hobbies" id="hobbies" multiple>
<option value="reading">قراءة</option>
<option value="swimming">سباحة</option>
<option value="coding">برمجة</option>
<option value="gaming">ألعاب</option>
</select>خصائص مهمة أخرى:
size: تحدد عدد الخيارات الظاهرة في القائمة المنسدلة (إذا كانتmultipleأو إذا كانsizeأكبر من 1).disabled: لتعطيل القائمة المنسدلة أو خيار معين داخلها.required: تجعل اختيار المستخدم إلزامياً قبل إرسال النموذج.
نصيحة سريعة: لتخصيص شكل القوائم المنسدلة بشكل كبير، عادة ما نلجأ لاستخدام JavaScript ومكتبات الواجهة الأمامية (مثل React, Vue, Angular) أو حتى مكتبات CSS متخصصة، لأن التخصيص عبر CSS النقي محدود نوعاً ما.
وهذا هو كل شيء عن القوائم المنسدلة في HTML! بسيطة، صح؟ طبقها وجرب بنفسك.