Главная/ HTML справочник | HTML теги: назначение, синтаксис, атрибуты, примеры./ Tags/ HTML тег optgroup | назначение, синтаксис, атрибуты, примеры

Тег optgroup

Последнее обновление: 03.03.2009

Тег <optgroup> (англ. option group — группа опций) — тег-контейнер для тегов <option>. Объединяет их в группу.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<select>
<optgroup label="...">
<option>...</option>
</optgroup>
</select>
Атрибуты


class определяет имя используемого класса
dir определяет направление символов:

  • ltr — слева направо
  • rtl — справа налево
disabled флаг. Делает элемент неактивным
id уникальный индетификатор
label текст-заголовок группы. Обязательный параметр
lang определяет используемый язык
onblur потеря фокуса элементом.
Отсутствует в спецификации HTML 4.01!
onclick щелчек на элементе
ondblclick двойной щелчек на элементе
onchange потеря фокуса элементом при условии, что его содержимое изменилось.
Отсутствует в спецификации HTML 4.01!
onfocus получение фокуса элементом.
Отсутствует в спецификации HTML 4.01!
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
style задает встроенную таблицу стилей
title всплывающая подсказка
Пример

Выпадающий список с применением <optgroup>:


<select>
<optgroup label="четырехугольники">
<option>Прямоугольник</option>
<option>Квадрат</option>
<option>Ромб</option>
</optgroup>
<optgroup label="цвета">
<option>Красный</option>
<option>Зеленый</option>
<option>Синий</option>
</optgroup>
</select>
Рекомендации по использованию
  • закрывающий тег обязателен (</optgroup>)
  • тег <optgroup> должен находиться внутри тега-контейнера <select> или <form>
  • должен содержать только теги <option>
  • обязательных атрибутов нет

Логическая групировка удобна, когда пользователь должен выбрать из большого списка опций: группы связанных опций легче осмыслить и запомнить, чем один большой список.

Твой код:

Результат: