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

Тег optgroup

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

Тег <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>
  • обязательных атрибутов нет

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

Твой код:

Результат: