<option>: عنصر OPTION
آخر تحديث: 2026-10-13
<option>عنصر OPTION
عنصر واحد قابل للاختيار داخل select أو datalist أو optgroup.
| الفئة | النماذج |
|---|---|
| نموذج المحتوى | محتوى تدفقي |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | نعم — يتطلب إغلاق </option> وسم |
| الحالة | قياسي |
📝 البنية
<option value="apple">تفاح</option>⚙️ السمات
يدعم هذا العنصر السمات العامة بالإضافة إلى ما يلي:
| السمة | القيمة | الوصف |
|---|---|---|
value | Value sent to the server (falls back to text if omitted). | |
selected | Pre-select this option. | |
disabled | Disables this option. | |
label | Alternative display text. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <option> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： بدون value، يُرسل النص الموجود بين الوسوم.
❓ الأسئلة الشائعة
Qما العلاقة بين value في option والنص المعروض؟
Aعند وجود سمة value يُرسل قيمة value ويُستخدم النص بين الوسمين للعرض فقط؛ وبدون value يُرسل النص بين الوسمين نفسه. وأفضل الممارسات كتابة value دائمًا (مثل
<option value='bj'>بكين</option>) حتى لا يعتمد الخادم على نص عرض قابل للتغير.Qهل يمكن جعل option معطلة؟
Aنعم،
<option disabled> تجعل الخيار غير قابل للاختيار (يظهر باهتًا). ومن الاستخدامات الشائعة: سطر إرشادي «اختر» كخيار مؤقت، والخيارات التي خرجت من الصرف. ويمكن أيضًا تعطيل optgroup كاملة.Qهل يقبل option وسوم HTML؟
Aلا تقريبًا، فـ option الأصلي يعرض نصًا خالصًا فقط (تتسامح بعض المتصفحات مع وسوم بسيطة جدًا لكن دون اعتماد). والقوائم المنسدلة الغنية التنسيق (أيقونات وسطران) لا تُنجز إلا بمكونات مخصصة أو مكتبات خارجية، مع حفظ سمات الوصولية.
🏷️ وسوم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قادمة قريبًا — ترقبوا.
📚 دروس ذات صلة
