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>
تصميمه الإفتراضي
لا يوجد تصميم إفتراضي له.
نصائح و ملاحظات
تقسيم الخيارات في القائمة لمجموعات هو أمر اختياري و لكنه يساعد المستخدم على إيجاد الخيار بشكل أسرع خاصةً إذا كانت القائمة تحتوي على خيارات كثيرة. لهذا في حال كانت القائمة تحتوي على خيارات كثيرة مشابهة أو مشتركة فالأفضل أن تقسّمها لمجموعات.