<optgroup> – елемент групи варіантів
{{HTMLSidebar}}
Елемент 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 Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox for Android Full support 4 | Opera Android Full support Yes | Safari on iOS Full support Yes | Samsung Internet Full support Yes |
disabled
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 8 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox for Android Full support 4 | Opera Android Full support Yes | Safari on iOS Full support Yes | Samsung Internet Full support Yes |
label
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 5.5 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox for Android Full support 4 | Opera Android Full support Yes | Safari on iOS Full support Yes | Samsung Internet Full support Yes |
Дивіться також
- Інші елементи, пов'язані з формами:
<form>,<legend>,<label>,<button>,<select>,<datalist>,<option>,<fieldset>,<textarea>,<input>,<output>,<progress>і<meter>.