HTML-тег <optgroup>

HTML-тег <optgroup> используется для группировки связанных пунктов в раскрывающемся списке, созданном с помощью элемента <select> . Этот тег улучшает организацию и удобство использования больших раскрывающихся меню, объединяя пункты в логические группы.

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

Базовый синтаксис тега HTML <optgroup>

Базовая структура тега <optgroup> внутри элемента <select> следующая: 

<select>
    <optgroup label="Group Name">
        <option value="value1">Option 1</option>
        <option value="value2">Option 2</option>
    </optgroup>
    <optgroup label="Another Group">
        <option value="value3">Option 3</option>
    </optgroup>
</select>
HTML optgroup Пример тега с двумя группами параметров

Атрибут label задает заголовок для группы параметров.

Пример сгруппированных вариантов

Вот пример раскрывающегося меню для выбора автомобиля, сгруппированного по производителю: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Select a Car</h2>
        <select>
            <optgroup label="Toyota">
                <option value="corolla">Corolla</option>
                <option value="camry">Camry</option>
            </optgroup>
            <optgroup label="Ford">
                <option value="focus">Focus</option>
                <option value="mustang">Mustang</option>
            </optgroup>
        </select>
    </body>
</html>
Пример сгруппированных вариантов

Пояснение: Опции сгруппированы под заголовками «Toyota» и «Ford», что упрощает пользователям поиск нужной модели автомобиля.

Атрибуты HTML-тега <optgroup>

  • label: определяет имя группы и служит заголовком для сгруппированных параметров. Этот атрибут обязателен.
  • отключено: отключает все параметры в группе, делая их недоступными для выбора.
  • Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как id , class и style .

Например, вы можете использовать атрибут disabled , чтобы сделать группу опций недоступной: 

<select>
    <optgroup label="Unavailable Cars" disabled>
        <option value="model1">Model 1</option>
        <option value="model2">Model 2</option>
    </optgroup>
</select>

Результат: Группа «Недоступные автомобили» и ее параметры будут отображаться серым цветом и не смогут быть выбраны пользователем.

Стилизация тега <optgroup> с помощью CSS

Хотя браузеры предоставляют стили по умолчанию для тега <optgroup> , вы можете настроить его внешний вид с помощью CSS: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            optgroup {
                font-weight: bold;
                color: #007BFF;
            }
            option {
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <h2>Styled Dropdown</h2>
        <select>
            <optgroup label="Fruits">
                <option value="apple">Apple</option>
                <option value="banana">Banana</option>
            </optgroup>
            <optgroup label="Vegetables">
                <option value="carrot">Carrot</option>
                <option value="spinach">Spinach</option>
            </optgroup>
        </select>
    </body>
</html>

Результат: метки групп «Фрукты» и «Овощи» выделены жирным шрифтом и имеют собственный цвет, что улучшает внешний вид раскрывающегося списка.

Практическое применение тега <optgroup>

  • Раскрывающиеся списки форм: организуйте связанные параметры в формах, например, сгруппируйте страны по континентам.
  • Выбор продукта: классифицируйте продукты по типу или бренду для удобства использования на сайтах электронной коммерции.
  • Меню настроек: группируйте настройки по соответствующим категориям для удобной навигации.
  • Регистрация на мероприятие: групповые типы билетов или варианты мероприятий на основе категорий, таких как количество мест или виды деятельности.