English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Руководство по HTML

Полный список тегов HTML

HTML: <optgroup> тег

Тег HTML <optgroup> создает группу элементов в выпадающем списке <select>. Эти значения списка определяются серией тегов <option> и группируются с помощью тега <optgroup>. Значение label тега <optgroup> будет отображаться в виде серого заголовка над группой элементов в контроле <select>. Этот тег также часто называется элементом <optgroup>.

Онлайн пример

Соберитеrelated элементы с помощью тега <optgroup>:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Использование тега HTML optgroup (Базовый урок на oldtoolbag.com)</title>
</head>
<body>
　　<label for="tutorial_choice">Уроки:　</label>
　　<select id="tutorial_choice">
　　　　<optgroup label="Web">
　　　　　　<option value="html">HTML</option>
　　　　　　<option value="css">CSS</option>
　　　　</optgroup>
　　　　<optgroup label="Database">
　　　　　　<option value="sql">SQL</option>
　　　　　　<option value="oracle">Oracle</option>
　　　　</optgroup>
　　</select>
</body>
</html>
Проверьте это ‹/›

В этом примере документа HTML5 мы используем тег <optgroup> для создания двух групп элементов в выпадающем списке. Заголовок первой группы - Web, и она включает два значения - HTML и CSS. Заголовок второй группы - "База данных", и она включает два значения - SQL и Oracle.

Совместимость с браузерами

IEFirefoxOperaChromeSafari

Большинство основных браузеров поддерживают тег <optgroup>.

Определение и описание использования тега

Тег <optgroup> организует группу тегов <option> в группу с заголовком.

Значение label тега <optgroup> будет отображаться как серый заголовок. Все элементы группы будут отображаться как отступленный список вариантов под заголовком.

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

Если у вас много групп вариантов, вы можете использовать тег <optgroup>, чтобы просто объединить связанные варианты.

Свойства

СвойстваЗначениеОписание
disableddisabledОпределяет отключение этой группы вариантов.
labeltextОпределяет описание для группы вариантов.

Глобальные свойства

Тег <optgroup> поддерживает глобальные свойства, см. таблицу полных свойств Глобальные свойства HTML.

свойства событий

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

HTML: <option> тегHTML: <ol> тег