Тег <optgroup>

Тег <optgroup> (укр. – “група опцій”) в HTML використовується для групування елементів <option> у межах випадаючого списку, створеного за допомогою тегу <select>. Це дозволяє логічно структурувати та впорядковувати варіанти, поділяючи їх на окремі групи. Групи варіантів можуть бути корисними, коли потрібно організувати великий набір варіантів у списку для покращення зручності користувачів.

Атрибути

Специфічні атрибути

  • label — визначає етикетку або заголовок для групи варіантів. Це текст, який відображається перед списком елементів <option> в межах цієї групи. Атрибут label допомагає користувачам зрозуміти, до якої категорії належать варіанти. Наприклад:
<optgroup label="Фрукти">
    <option value="apple">Яблуко</option>
    <option value="banana">Банан</option>
</optgroup>

Глобальні атрибути

Тег <optgroup> підтримує всі глобальні атрибути HTML, зокрема:

  • id — унікальний ідентифікатор для елемента. Наприклад:
<optgroup id="fruits-group" label="Фрукти">
    <option value="apple">Яблуко</option>
    <option value="banana">Банан</option>
</optgroup>
  • class — задає клас для застосування стилів через CSS. Наприклад:
<optgroup class="fruit-group" label="Фрукти">
    <option value="apple">Яблуко</option>
    <option value="banana">Банан</option>
</optgroup>
  • style — дозволяє додавати інлайн-стилі до елемента. Наприклад:
<optgroup style="font-weight: bold;" label="Фрукти">
    <option value="apple">Яблуко</option>
    <option value="banana">Банан</option>
</optgroup>
  • title — текстовий опис для елемента, який може відображатися при наведенні курсора. Наприклад:
<optgroup title="Група фруктів" label="Фрукти">
    <option value="apple">Яблуко</option>
    <option value="banana">Банан</option>
</optgroup>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання <optgroup></title>
</head>
<body>
    <label for="products">Оберіть продукт:</label>
    <select id="products" name="products">
        <optgroup label="Цитрусові">
            <option value="orange">Апельсин</option>
            <option value="lemon">Лимон</option>
        </optgroup>
        <optgroup label="Ягоди">
            <option value="strawberry">Полуниця</option>
            <option value="blueberry">Чорниця</option>
        </optgroup>
    </select>
</body>
</html>

Додаткові моменти

  • Тег <optgroup> дозволяє згрупувати варіанти за допомогою текстових заголовків, що підвищує зручність користувачів при виборі варіантів із великих списків.
  • Тег <optgroup> має лише один атрибут label, який визначає заголовок групи.
  • За допомогою тегу <optgroup> можна створювати багаторівневі списки для більш складних форм або інтерфейсів.
  • Тег <optgroup> не може бути використаний без контейнера <select>, оскільки він є частиною списку варіантів, який потрібно впорядкувати за допомогою <select>.