إعلان
تعلم الآن

HTML الوسم <optgroup>

تعريفه

نستخدم الوسم <optgroup> على النحو التالي لتقسيم عناصر القائمة المنسدلة التي ننشئها بواسطة الوسم <select> إلى مجموعات.


<select>
	
    <optgroup label="title">
        <option>option-1</option>
        <option>option-2</option>
    </optgroup>
	
    <optgroup label="title">
        <option>option-1</option>
        <option>option-2</option>
    </optgroup>
</select>
	

مكان الكلمة title نضع العنوان الذي سيتم وضعه للمجموعة التي تم وضع العناصر فيها.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <optgroup>.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
1 12 1 مدعوم مدعوم مدعوم مدعوم مدعوم غير مدعوم مدعوم مدعوم

خصائصه


الخاصية disabled

يمكن إضافتها للوسم لجعله غير مفعل مما يعني أنه سيظهر في القائمة و لكن لن يكون بإمكان المستخدم اختيار العناصر الموضوعة بداخله.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
1 12 1 مدعوم مدعوم مدعوم مدعوم مدعوم غير مدعوم مدعوم مدعوم


الخاصية label

يمكن إضافتها للوسم لوضع عنوان لمجموعة العناصر الموضوعة بداخله.
العنوان المراد وضعه للمجموعة يجب وضعه كقيمة لها.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
1 12 1 مدعوم مدعوم مدعوم مدعوم مدعوم غير مدعوم مدعوم مدعوم

إستخدامه

في المثال التالي قمنا بإضافة مربع نص مربوط بقائمة خيارات مساعدة تتضمن 6 قيم مجهزة مسبقاً.

مثال

<label for="language">Select Language</label>
<select name="language" id="language">
	<optgroup label="Meta Language">
		<option>HTML</option>
		<option>XML</option>
	</optgroup>
	<optgroup label="Programming Language">
		<option>Java</option>
		<option>C++</option>
		<option>Python</option>
	</optgroup>
</select>
		

جرب الكود

تصميمه الإفتراضي

لا يوجد تصميم إفتراضي له.

نصائح و ملاحظات

تقسيم الخيارات في القائمة لمجموعات هو أمر اختياري و لكنه يساعد المستخدم على إيجاد الخيار بشكل أسرع خاصةً إذا كانت القائمة تحتوي على خيارات كثيرة.
لهذا في حال كانت القائمة تحتوي على خيارات كثيرة مشابهة أو مشتركة فالأفضل أن تقسّمها لمجموعات.

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة