<optgroup> – елемент групи варіантів
Елемент HTML <optgroup>
створює групування варіантів усередині елемента <select>
.
Спробуйте його в дії
Примітка: Елементи optgroup не можна вкладати один в одного.
Атрибути
Цей елемент приймає глобальні атрибути.
disabled
Якщо задано цей Булів атрибут, то жоден з елементів цієї групи варіантів не може бути вибраним. Зазвичай браузери позначають такі контрольні елементи сірим кольором і не передають їм жодних браузерних подій, таких як клацання мишею або події, пов'язані з фокусом.
label
Назва групи варіантів, яку браузер може використовувати при позначенні варіантів у користувацькому інтерфейсі. Цей атрибут є обов'язковим, якщо цей елемент використовується.
Приклади
<select>
<optgroup label="Група 1">
<option>Варіант 1.1</option>
</optgroup>
<optgroup label="Група 2">
<option>Варіант 2.1</option>
<option>Варіант 2.2</option>
</optgroup>
<optgroup label="Група 3" disabled>
<option>Варіант 3.1</option>
<option>Варіант 3.2</option>
<option>Варіант 3.3</option>
</optgroup>
</select>
Результат
Технічний підсумок
Категорії вмісту | Жодних. |
---|---|
Дозволений вміст | Нуль або більше елементів <option> . |
Пропуск тега |
Початковий тег є обов'язковим. Кінцевий тег є необов'язковим, якщо після цього елемента зразу стоїть інший елемент <optgroup> , або якщо батьківський елемент не має далі вмісту.
|
Дозволені батьківські елементи | Елемент <select> . |
Неявна роль ARIA | group |
Дозволені ролі ARIA | Жодної дозволеної ролі |
Інтерфейс DOM | HTMLOptGroupElement |
Специфікації
Специфікація |
---|
HTML Standard (HTML) # the-optgroup-element |
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
optgroup
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 5.5 | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support 4 | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
disabled
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 8 | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support 4 | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
label
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 5.5 | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support 4 | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
Дивіться також
- Інші елементи, пов'язані з формами:
<form>
,<legend>
,<label>
,<button>
,<select>
,<datalist>
,<option>
,<fieldset>
,<textarea>
,<input>
,<output>
,<progress>
і<meter>
.