Тег <optgroup>
Описание
Тег <optgroup> (от англ. "option group") используется для группировки связанных элементов в выпадающем списке <select>. Это семантический элемент, который улучшает организацию и доступность сложных списков выбора.
<select>
<optgroup label="Фрукты">
<option>Яблоко</option>
<option>Банан</option>
</optgroup>
<optgroup label="Овощи">
<option>Морковь</option>
<option>Брокколи</option>
</optgroup>
</select>
<select>
<optgroup label="Доступные">
<option>Вариант 1</option>
</optgroup>
<optgroup label="Недоступные" disabled>
<option>Вариант 2</option>
</optgroup>
</select>
Ключевые особенности:
- Только для использования внутри
<select> - Может содержать только
<option>элементы - Улучшает юзабилити длинных списков
- Поддерживается всеми современными браузерами
- Важен для доступности (скринридеры объявляют группы)
<style>
select {
padding: 8px;
width: 200px;
}
optgroup {
font-style: normal;
font-weight: bold;
color: #2c3e50;
background: #f8f9fa;
}
optgroup option {
font-weight: normal;
padding-left: 20px;
}
</style>
<select>
<optgroup label="Группа A">
<option>Элемент A1</option>
<option>Элемент A2</option>
</optgroup>
</select>
Рекомендации по использованию:
- Используйте для логической группировки похожих вариантов
- Делайте метки групп краткими, но описательными
- Избегайте вложенных
<optgroup>(не поддерживается) - Для сложной стилизации рассмотрите кастомные dropdown-решения
- Сочетайте с
<label>для доступности формы
Тег <optgroup> значительно улучшает организацию выпадающих списков, делая их более структурированными и удобными для пользователей, особенно при работе с большим количеством вариантов выбора.
Атрибуты
| disabled | Отключает группу |
| label | Метка группы (обязательный) |
| accesskey | Горячая клавиша |
| class | CSS-классы |
| contenteditable | Разрешает редактирование |
| data-* | Пользовательские данные |
| dir | Направление текста |
| hidden | Скрывает элемент |
| id | Уникальный идентификатор |
| lang | Язык содержимого |
| spellcheck | Проверка орфографии |
| style | Инлайновые стили |
| tabindex | Порядок перехода |
| title | Всплывающая подсказка |
| translate | Определяет возможность перевода |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 4.0 | 1.0 | 4.0 | 1.0 | 1.0 |