Главная
HTML-тег <optgroup>
Характеристики
- Тип: строчный, статичный, семантический
- Назначение: Группирует элементы <option> внутри выпадающего списка для лучшей организации.
- Родители: <select> или <datalist>
- Потомки: <option> элементы.
- Глобальные атрибуты: все
- Атрибуты событий: все
Атрибуты
- label — Название группы опций.
- disabled — Отключает все опции внутри группы.
Пример использования
<select>
<optgroup label="Фрукты">
<option>Яблоко</option>
<option>Банан</option>
</optgroup>
<optgroup label="Овощи">
<option>Морковь</option>
<option>Брокколи</option>
</optgroup>
</select>
Использование в JavaScript
// Получение всех optgroup элементов
const optgroups = document.querySelectorAll('optgroup');
// Изменение метки первой группы
optgroups[0].label = 'Фрукты и ягоды';
Рекомендации по обеспечению доступности (a11y)
- Используйте атрибут label для описания группы опций.
- Группировка опций улучшает восприятие списка пользователями, особенно при большом количестве опций.
- Убедитесь, что опции логически сгруппированы для облегчения навигации.
Полезные ссылки