Тег <optgroup> определяет группу опций в раскрывающемся списке <select>. Каждая опция, предлагаемая в раскрывающемся списке, определяется тегом <option>. Элемент <select> должен содержать хотя бы один элемент <option>.

Родительский: <select>
Контент: Один или несколько <option>
Открывающий тег: Обязательный
Закрывающий тег: Обязательный
Версия: HTML 4, 4.01, 5
Элементы <optgroup> не могут быть вложенными. Этот элемент должен встречаться только в контексте элемента <select>.

Синтаксис

Базовый синтаксис тега <optgroup> выглядит следующим образом:

HTML / XHTML: <optgroup label="text"> ... </optgroup>

Примеры написания кода тега <optgroup>:

<select>
    <optgroup label="Sports cars">
        <option value="ferrari">Ferrari</option>
        <option value="lamborghini">Lamborghini</option>
    </optgroup>
    <optgroup label="Luxury cars">
        <option value="mercedes">Mercedes</option>
        <option value="bentley">Bentley</option>
    </optgroup>
</select>
Группировка связанных опций особенно полезна, когда пользователю приходится выбирать из длинного списка опций; Группы связанных опций легче понять и получить к ним доступ, чем один длинный список опций.

Специальные атрибуты тега

В следующей таблице приведены атрибуты, которые относятся к тегу <optgroup>

Атрибут Значение Описание
Обязательно в этом теге должен быть указан следующий атрибут, чтобы разметка была валидной.
label text Определяет <label> для группы опций.
Опционально — следующие втрибуты не являются обязальными.
disabled disabled Этот логический атрибут указывает, что вложенный набор параметров отключен, т.е. ни один из элементов в группе параметров не может быть выбран.

Глобальные атрибуты

Как и все другие HTML-теги, тег <optgroup> поддерживает все глобальные атрибуты в HTML5.

Атрибуты для событий

Тег <optgroup> так же поддерживает атрибуты событий в HTML5.

Поддержка браузеров

Тег <optgroup> поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.