Тег <optgroup> HTML группа пунктов списка

Тег <optgroup> в HTML используется для объединения в группы пунктов HTML списка - тегов <option>. Группировка пунктов в списке <select> (выпадающем списке или списке с выбором множества вариантов) упрощает процесс выбора пункта для пользователя.

Пункты внутри группы обычно выделяются браузером при помощи отступа слева, а само название группы обычно отображается жирным шрифтом.

Дочерними элементами для <optgroup> должны быть теги <option>.

Название группы не может быть использовано как выбранное значение списка.

Если группа отключена атрибутом disabled, все пункты группы станут недоступны для выбора.

Списки в HTML являются элементами форм. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

Синтаксис

<optgroup>элементы option</optgroup>

Примеры использования <optgroup> в HTML коде

Создавать группы пунктов можно как в выпадающем списке <select>, так и в <select> списке с выбором нескольких значений.

Группы пунктов в выпадающем списке

HTML код выпадающего списка с группами пунктов optgroup

<select name="cars_1">
  <optgroup label="Volkswagen AG">
    <option value="1">Audi</option>
    <option value="2">Bentley</option>
    <option value="3">SEAT</option>
    <option value="4">Skoda</option>
    <option value="5">Volkswagen</option>
  </optgroup>
  <optgroup label="Toyota Motor">
    <option value="6">Toyota</option>
    <option value="7">Lexus</option>
  </optgroup>
  <optgroup label="General Motors" disabled="disabled">
    <option value="8">Chevrolet</option>
    <option value="9">Opel</option>
  </optgroup>
  <optgroup label="Honda Motor">
    <option value="10">Honda</option>
    <option value="11">Acura</option>
  </optgroup>
</select>

Группы пунктов в списке с множественным выбором

HTML код примера использования групп в списке с выбором нескольких значений

<select name="cars_2[]" multiple="multiple" size="4">
  <optgroup label="General Motors">
    <option value="1">Chevrolet</option>
    <option value="2">Opel</option>
  </optgroup>
  <optgroup label="Volkswagen AG">
    <option value="3">Audi</option>
    <option value="4">Bentley</option>
    <option value="5">SEAT</option>
    <option value="6">Skoda</option>
    <option value="7">Volkswagen</option>
  </optgroup>
  <optgroup label="Honda Motor" disabled="disabled">
    <option value="8">Honda</option>
    <option value="9">Acura</option>
  </optgroup>
  <optgroup label="Toyota Motor">
    <option value="10">Toyota</option>
    <option value="11">Lexus</option>
  </optgroup>
</select>

Поддержка браузерами

Тег
<optgroup>	Да	Да	Да	Да	Да

Атрибуты тега optgroup

Тег <optgroup> также поддерживает глобальные HTML атрибуты.