`<optgroup>` Элемент группы параметров HTML

Базовая поддержка Широко доступно *

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

* Некоторые части этой функции могут иметь разный уровень поддержки.

Элемент <optgroup> HTML группирует параметры внутри элемента <select>.

В настраиваемых элементах <select> элемент <legend> можно использовать как дочерний элемент <optgroup>, чтобы задать подпись, которую легко выбрать и стилизовать. Она заменяет любой текст, заданный в атрибуте label элемента <optgroup>, и имеет ту же семантику.

Попробуйте

<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
  <optgroup label="Theropods">
    <option>Tyrannosaurus</option>
    <option>Velociraptor</option>
    <option>Deinonychus</option>
  </optgroup>
  <optgroup label="Sauropods">
    <option>Diplodocus</option>
    <option>Saltasaurus</option>
    <option>Apatosaurus</option>
  </optgroup>
</select>

label {
  display: block;
  margin-bottom: 10px;
}

Примечание: Элементы optgroup нельзя вкладывать друг в друга.

Атрибуты

Этот элемент включает глобальные атрибуты.

disabled: Если задан этот логический атрибут, ни один из пунктов этой группы параметров нельзя выбрать. Часто браузеры отображают такой элемент управления серым цветом, и он не получает события взаимодействия, например щелчки мышью или события, связанные с фокусом.
label: Название группы параметров, которое браузер может использовать для обозначения параметров в пользовательском интерфейсе. Этот атрибут обязателен, если используется данный элемент.

Примеры

<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup>
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>

Результат

Техническая сводка

Категории содержимого	Нет.
Допустимое содержимое	Ноль или более элементов `<option>`. В настраиваемых элементах select допускается использовать элемент `<legend>` как дочерний элемент `<optgroup>`.
Пропуск тегов	Открывающий тег обязателен. Закрывающий тег можно опустить, если сразу за этим элементом следует другой элемент `<optgroup>` или если родительский элемент больше не содержит содержимого.
Допустимые родители	Элемент `<select>`.
Неявная роль ARIA	`group`
Допустимые роли ARIA	Роли `role` не допускаются
Интерфейс DOM	`HTMLOptGroupElement`

Спецификации

Спецификация
HTML> # the-optgroup-element>

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`optgroup`	1	12	1	15	≤4	18	4	14	≤3.2	1.0	4.4	≤3.2
`disabled`	1	12	1	15	7 До Safari 7 атрибут можно задать, но он не оказывает никакого эффекта.	18	4	14	Нет Атрибут можно задать, но он не оказывает никакого эффекта.	1.0	4.4	Нет Атрибут можно задать, но он не оказывает никакого эффекта.
`label`	1	12	1	15	≤4	18	4	14	≤3.2	1.0	4.4	≤3.2

См. также

Другие элементы, связанные с формами: <form>, <legend>, <label>, <button>, <select>, <datalist>, <option>, <fieldset>, <textarea>, <input>, <output>, <progress> и <meter>.
Настраиваемые элементы select

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/optgroup

<optgroup> Элемент группы параметров HTML