html.okpython.net
Основы создания сайтов
HTML :: Тег <optgroup>
В HTML тег <optgroup> (от англ. option group – группа вариантов) используется для группировки по логическому или иному признаку пунктов <option> раскрывающегося списка <select>.
Закрывающий тег элемента <optgroup> может быть опущен, если он является последним элементом внутри родительского элемента <select> или сразу после него находится следующий элемент <optgroup>.
Синтаксис
<select>
<optgroup label="Заголовок группы">
...
<option>...</option>
...
</optgroup>
</select>
Закрывающий тег: не обязателен.
Атрибуты
- disabled – данный логический атрибут блокирует доступ к группе пунктов <option>. Атрибут по умолчанию выключен и значений не принимает.
- label – устанавливает заголовок для группы пунктов <option>.
- Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/form-elements.html#the-optgroup-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/optgroup
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> </head> <body> <form action="php/quiz.php" method="POST" name="quiz_form"> Укажите любимые фрукты и овощи: <br><br> <select name="fruits_vegetables" multiple size="3"> <optgroup label="Фрукты"> <option value="apple">Яблоки</option> <option value="pear">Груши</option> <option value="orange">Апельсины</option> </optgroup> <optgroup label="Овощи"> <option value="carrot">Морковь</option> <option value="beet">Свекла</option> <option value="potato">Картофель</option> </optgroup> </select> <br><br> <button type="submit" disabled>Отправить</button> </form> </body> </html>
Пример №1