عنصر <optgroup>

ما هو عنصر <optgroup>؟

هو عنصر يجمع بين مجموعة من عناصر الخيارات (<option>) في عنصر <select>.

استخدامات عنصر <optgroup>

• لتنظيم خيارات القائمة المنبثقة في مجموعات منطقية.
• لتحسين سهولة الاستخدام من خلال تجميع الخيارات ذات الصلة.

خصائص عنصر <optgroup>

• label: تحدد تسمية المجموعة.
• disabled: تعطيل جميع عناصر الخيارات داخل المجموعة.

أمثلة على عنصر <optgroup>

<select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="potato">Potato</option>
  </optgroup>
</select>

التحسينات

• أضف خاصية label لعنصر optgroup لوصف المجموعة.
• استخدم خصائص disabled أو readonly لتعطيل الخيارات أو جعلها للقراءة فقط.
• استخدم سمات ARIA لجعل المحتوى أكثر سهولة في الوصول إليه، على سبيل المثال: aria-label وaria-labelledby.

مثال على تحسينات عنصر <optgroup>

<select aria-label="Choose your favorite fruit">
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="potato">Potato</option>
  </optgroup>
</select>