24 – القوائم المنسدلة < select > و < option >– النماذج (Forms) – المستوى الثاني متوسط
📌 القوائم المنسدلة <select> و <option>
🔹 ما هو <select>؟
-
عنصر يستخدم لإنشاء قائمة منسدلة (Dropdown List).
-
يسمح للمستخدم يختار عنصر واحد أو أكثر من مجموعة خيارات.
-
بيتكون من وسم رئيسي <select> جواه عناصر فرعية <option>.
✅ التركيب الأساسي:
🔹 ما هو <option>؟
-
عنصر يمثل خيار واحد داخل القائمة.
-
له خاصية value = القيمة اللي بتتبعت للسيرفر عند اختيارها.
✅ مثال:
🔹 الخصائص المهمة لوسم <select>
1. name
-
اسم القائمة (مهم عشان البيانات تتبعت للسيرفر).
✅ مثال:
2. id
-
يُستخدم مع <label> أو مع JavaScript لربط القائمة.
✅ مثال:
3. multiple
-
يخلي القائمة تدعم اختيار أكثر من عنصر باستخدام (Ctrl / Shift).
✅ مثال:
4. size
-
يحدد عدد العناصر الظاهرة بدون الحاجة للتمرير.
✅ مثال:
🔎 النتيجة: تظهر 3 عناصر في وقت واحد بدل عنصر واحد.
🔹 الخصائص المهمة لوسم <option>
1. value
-
القيمة اللي بتتبعت للسيرفر.
2. النص الداخلي
-
اللي بيظهر للمستخدم في القائمة.
3. selected
-
يخلي الخيار محدد بشكل افتراضي.
✅ مثال:
4. disabled
-
يخلي الخيار غير قابل للاختيار.
✅ مثال:
🔹 مثال عملي كامل
🔎 النتيجة: قائمة منسدلة فيها دول عربية، الخيار الأول (اختر) معطل ومختار افتراضيًا.
🔹 ملخص
-
<select> = القائمة المنسدلة (Dropdown).
-
<option> = كل عنصر داخل القائمة.
-
الخصائص المهمة:
-
multiple → يسمح باختيار أكثر من عنصر.
-
size → يحدد عدد العناصر الظاهرة.
-
selected → خيار محدد افتراضيًا.
-
disabled → خيار غير قابل للاختيار.
-
Call now
Contact WhatsApp
