Атрибут label тега <optgroup>

Описание

Атрибут label для тега <optgroup> задает название группы опций в выпадающем списке. Это обязательный атрибут, который обеспечивает доступность и понятную структуру для пользователей.

Пример использования:
<select> <optgroup label="Фрукты"> <option>Яблоко</option> <option>Апельсин</option> </optgroup> <optgroup label="Овощи"> <option>Морковь</option> <option>Брокколи</option> </optgroup> </select>

Основные характеристики:

Характеристика Описание
Обязательность Является обязательным атрибутом для <optgroup>
Отображение Выводится как заголовок группы в выпадающем списке
Доступность Читается скринридерами при навигации по списку

Рекомендации по использованию:

  • Используйте краткие, но описательные названия
  • Сохраняйте единый стиль именования для всех групп
  • Избегайте слишком длинных названий (более 20-30 символов)
  • Для многоязычных сайтов переводите названия групп

Пример с различными стилями групп:

<style> optgroup[label="Премиум"] { font-weight: bold; color: #d4af37; } optgroup[label="Стандарт"] { font-style: italic; } </style> <select> <optgroup label="Премиум"> <option>Золотой пакет</option> </optgroup> <optgroup label="Стандарт"> <option>Базовый пакет</option> </optgroup> </select>

Особенности доступности:

  • Скринридеры объявляют название группы перед опциями
  • Не заменяйте label на пустое значение
  • Для сложных интерфейсов можно добавить ARIA-атрибуты

Ограничения:

  • Не поддерживает HTML-разметку внутри
  • Не может быть пустым
  • В некоторых браузерах стилизация ограничена

Примечание: Правильное использование атрибута label значительно улучшает пользовательский опыт при работе с группированными списками выбора. Всегда обеспечивайте осмысленные и понятные названия групп, соответствующие их содержимому.