Тег HTML <optgroup>
Тег HTML <optgroup> группирует элементы в выпадающем списке <select>, определённом тегом <option>. Примеры использования.
Тег HTML <optgroup> группирует связанные элементы <option> внутри выпадающего списка <select>. Обязательный атрибут label задаёт заголовок группы, который браузер отображает полужирным шрифтом, а сами параметры автоматически делаются с отступом под ним.
Зачем и когда использовать <optgroup>
Элемент <select> с длинным и плоским списком вариантов трудно просматривать. Группировка вариантов под значимыми заголовками помогает пользователю быстрее найти нужный вариант. Используйте <optgroup>, когда:
- В вашем выпадающем списке много вариантов, которые делятся на естественные категории (страны по континентам, товары по типам, шрифты по семействам).
- Вы хотите добавить визуальный заголовок внутри списка без возможности его выбора — метка группы никогда не является выбираемым значением.
- Вы хотите отключить целый набор вариантов одним атрибутом
disabled.
Тег <optgroup> является элементом, связанным с формой, поэтому он имеет смысл только внутри <select>, который находится в <form>.
Синтаксис
Тег <optgroup> используется парами: элементы <option>, которые он группирует, записываются между открывающим (<optgroup>) и закрывающим (</optgroup>) тегами.
Пример тега HTML <optgroup>:
Пример выпадающего списка
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup label="Books">
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="java">Java</option>
<option value="linux">Linux</option>
<option value="git">Git</option>
</optgroup>
</select>
</body>
</html>Результат
Браузер отобразит выпадающий список с двумя группами:
- Books: HTML, CSS
- Snippets: Java, Linux, Git
Пример тега HTML <optgroup> с атрибутом disabled:
Пример тега HTML <optgroup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup disabled label="Quizzes">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
</optgroup>
<optgroup label="Snippets">
<option value="git">Git</option>
<option value="angularjs">AngularJS</option>
</optgroup>
</select>
</body>
</html>Результат
Браузер отобразит выпадающий список с двумя группами:
- Quizzes (отключена): HTML, CSS, JavaScript, PHP — эти варианты отображаются серым цветом и не могут быть выбраны.
- Snippets: Git, AngularJS
Когда группа отключена, ни один из вариантов внутри неё не может быть выбран; весь набор отключается в одном месте — вот почему отключение группы удобнее, чем добавление disabled к каждому <option> по отдельности.
Атрибут disabled
disabled — это boolean-атрибут. Наличие атрибута означает «отключено» — его следует писать отдельно:
<optgroup disabled label="Quizzes">Более старая форма disabled="disabled", показанная в примере выше, по историческим причинам всё ещё работает, но boolean-сокращение является современным и рекомендуемым способом. Не существует значения disabled="false" — чтобы включить группу, просто опустите атрибут.
Использование <optgroup> с <select multiple>
Группы работают так же в многострочном списке выбора. Атрибут multiple у <select> позволяет пользователю выбрать несколько вариантов (Ctrl/Cmd-клик), а заголовки групп остаются невыбираемыми:
<select multiple size="8">
<optgroup label="Front-end">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</optgroup>
<optgroup label="Back-end">
<option value="php">PHP</option>
<option value="node">Node.js</option>
</optgroup>
</select>Правила и нюансы
labelобязателен. Если его опустить, группа отображается с пустой строкой заголовка и является недопустимым HTML — группировка теряет смысл как для зрячих пользователей, так и для вспомогательных технологий. Всегда указывайте описательную метку.- Доступность. Программы чтения с экрана объявляют
labelгруппы, когда пользователь переходит в неё, поэтому чёткая метка (например, «Books», «Front-end») даёт пользователям важный контекст о том, где они находятся в списке. - Вложенность не поддерживается.
<optgroup>нельзя помещать внутрь другого<optgroup>. Группировка возможна только на одном уровне; HTML не поддерживает подгруппы. - Непоследовательная поддержка стилей. Браузеры отображают
<optgroup>и<option>с помощью нативных элементов управления ОС, поэтому поддержка CSS очень ограничена и непоследовательна. Chrome, Firefox и Safari игнорируют многие свойства — фоны, отступы и шрифты зачастую не имеют никакого эффекта. Приведённый ниже CSS может работать в одних браузерах и полностью игнорироваться в других, поэтому не полагайтесь на него. Если вам нужны полностью стилизованные сгруппированные списки, создайте пользовательский виджет с использованием JavaScript вместо стилизации нативного<select>.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| disabled | disabled | Указывает, что выбор элементов группы отключён. |
| label | text | Задаёт метку для группы, которая будет отображаться в виде заголовка в выпадающем списке. Обязательный атрибут. |
Тег <optgroup> поддерживает глобальные атрибуты и атрибуты событий.
Связанные теги
<select>— выпадающий список, содержащий группы.<option>— отдельные элементы, сгруппированные с помощью<optgroup>.<form>— форма, которая отправляет выбранное значение.
Как стилизовать тег HTML <optgroup>
Как отмечено выше в разделе нюансов, поддержка стилизации нативных элементов управления формами в браузерах ограничена и непоследовательна. Там, где это поддерживается, вы можете использовать CSS для настройки заголовка группы и её вариантов, но перед использованием протестируйте в каждом целевом браузере:
optgroup {
font-weight: bold;
color: #333;
}
optgroup option {
font-weight: normal;
padding-left: 15px;
}