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

Рейтинг: 3 из 5, голосов 1
+++--

Тег <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>

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

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<optgroup> Да Да Да Да Да

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

Атрибут Значения Описание
disabled не указывается / disabled

Логический атрибут. Если указан, отключает возможность выбора пунктов группы.

label текст Название группы, выводимое в выпадающем списке (подпись группы).

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

Оцените, насколько полезна эта страница
+++--
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.