<select>: عنصر SELECT
آخر تحديث: 2026-10-13
<select>عنصر SELECT
عنصر تحكم منسدل يتيح للمستخدم اختيار قيمة أو أكثر من قائمة محددة مسبقًا، يُرسل عادةً مع نموذج.
| الفئة | النماذج |
|---|---|
| نموذج المحتوى | محتوى تدفقي |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | نعم — يتطلب إغلاق </select> وسم |
| الحالة | قياسي |
📝 البنية
<select name="fruit">
<option value="apple">تفاح</option>
<option value="banana">موز</option>
</select>⚙️ السمات
يدعم هذا العنصر السمات العامة بالإضافة إلى ما يلي:
| السمة | القيمة | الوصف |
|---|---|---|
name | Field name sent to the server. | |
multiple | Allow selecting multiple options. | |
required | A value must be selected before submit. | |
disabled | Disables the whole control. | |
size | Number of visible rows (a list box when > 1). | |
autofocus | Automatically focused on page load. | |
form | The id of the associated form (can live outside it). |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <select> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： استخدم multiple للاختيار المتعدد؛ للكتابة الحرة ادمج input + datalist.
❓ الأسئلة الشائعة
Qكيف تحدد الخيار الافتراضي المحدد في select؟
Aأضف سمة
selected إلى <option> المعنية: <option selected>الخيار الافتراضي</option>. وبدونها يكون الخيار الأول محددًا افتراضيًا. ويمكن تغيير الحالة المحددة عبر JS بضبط select.value.Qهل يدعم select الاختيار المتعدد؟
Aنعم، أضف سمة
multiple: على الحاسوب Ctrl/Cmd للاختيار المتعدد، وتجربة الجوال أضعف. ويكتب name لـ select المتعدد بصيغة مصفوفة (مثل name='tags[]') حتى يستقبل الخادم قيمًا متعددة. وبتعدد الخيارات يُستحسن الانتقال إلى مجموعة مربعات اختيار.Qماذا تفعل إذا كثرت خيارات select؟
Aاستخدم
<optgroup> للتجميع مع عناوين فرعية؛ أو انتقل إلى <input list> مع <datalist> لتوفير اقتراحات قابلة للبحث. فـ select الأصلي لا يبحث، وفوق عشرات الخيارات فكّر في مكوّنات خارجية أو حل datalist.🏷️ وسوم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قادمة قريبًا — ترقبوا.
📚 دروس ذات صلة
