<optgroup> - HTML-елемент групи опцій
HTML-елемент <optgroup> створює групування для одного або декількох елементів <option> всередині елемента <select>.
Елемент <optgroup> корисний для структурування довгих списків опцій у випадаючому меню, роблячи їх більш читабельними та зручними для навігації. Кожна група має заголовок, який визначається атрибутом label.
Синтаксис
<select>
<optgroup label="Група 1">
<option>Опція 1.1</option>
</optgroup>
<optgroup label="Група 2">
<option>Опція 2.1</option>
</optgroup>
</select>Атрибути
Цей тег може мати глобальні атрибути.
labelОбов’язковий атрибут, який визначає назву групи, що відображається в списку опцій.
disabledБулевий атрибут, який вимикає всі опції всередині цієї групи. Користувач не зможе вибрати жодну з них.
Технічне резюме
| Категорія контенту | Немає. |
|---|---|
| Дозволений вміст | Нуль або більше елементів |
| Пропуск тегів | Початковий тег є обов’язковим. Кінцевий тег може бути пропущений, якщо за ним слідує інший елемент |
| Дозволені батьківські елементи | Елемент |
| Роль ARIA |
|
| DOM інтерфейс |
|
Приклади використання
<label for="cars">Оберіть автомобіль:</label>
<select id="cars" name="cars">
<optgroup label="Німецькі автомобілі">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
<optgroup label="Японські автомобілі">
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
</optgroup>
</select><label for="food">Оберіть страву:</label>
<select id="food" name="food">
<optgroup label="Супи">
<option>Борщ</option>
<option>Солянка</option>
</optgroup>
<optgroup label="Десерти" disabled>
<option>Тірамісу</option>
<option>Чізкейк</option>
</optgroup>
</select>Підтримка браузерів
<optgroup> | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
disabled | |||||||||||||
label |