Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

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>
<!-- القائمة المنسدلة --> <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>
<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>

جرب الكود

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

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

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

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

الدورات

أدوات مساعدة

أقسام الموقع

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