Тег <optgroup>: группы вариантов в списке select
Элемент optgroup объединяет связанные варианты выбора. Он помогает ориентироваться в длинном списке, не превращая заголовки групп в значения, которые можно отправить формой.
Назначение
Элемент optgroup объединяет связанные варианты выбора. Он помогает ориентироваться в длинном списке, не превращая заголовки групп в значения, которые можно отправить формой.
Как это работает
В обычном select название группы задаётся атрибутом label, а варианты размещаются в option. Атрибут disabled у optgroup делает недоступными варианты всей группы. Отдельная подпись label для самого select по-прежнему нужна.
Пример
<label for="lesson">Тема занятия</label>
<select id="lesson" name="lesson">
<optgroup label="Разметка"><option value="forms">Формы</option><option value="tables">Таблицы</option></optgroup>
<optgroup label="Оформление"><option value="grid">Сетка</option><option value="fonts">Шрифты</option></optgroup>
</select>Что должно получиться
В раскрытом списке варианты разделены на две группы. Пользователь выбирает конкретную тему; название группы помогает понять её место, но само не становится значением поля.
Граница применения и частая ошибка
Optgroup нельзя вкладывать друг в друга. Сложную многоуровневую классификацию лучше пересмотреть, а не имитировать отступами в названиях. Не делайте выводов о доступности только по виду меню: нативные списки различаются между платформами.
Самостоятельная проверка
Выберите тему клавиатурой и сравните отображаемое название со значением select.value в собственном проекте. Добавьте disabled ко второй группе и убедитесь, что её варианты нельзя выбрать обычным взаимодействием.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.