HTML таг `optgroup`

Пример

Кратък пример как се използва тагът <optgroup>.

<label for="car-select">Изберете автомобил:</label>
<select id="car-select" class="form-select">
  <optgroup label="Германски марки">
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
    <option value="vw">Volkswagen</option>
  </optgroup>
  <optgroup label="Японски марки">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
    <option value="mazda">Mazda</option>
  </optgroup>
</select>

Опитай в редактора

Дефиниция и употреба

Виж как се ползва тагът <optgroup>.

Елементът <optgroup> се използва вътре в <select>, за да групира логически свързани опции (<option>). Това прави падащите списъци по-структурирани и по-лесни за навигация, особено когато съдържат много елементи.

Основни характеристики:

Местоположение: Поставя се само като директно дете на <select>.
Съдържание: Може да съдържа само елементи <option> (без вложени <optgroup>).
Заглавие на групата: Определя се чрез задължителния атрибут label, който се показва като заглавие на групата в списъка.
Деактивиране на група: С атрибута disabled може да се изключи цялата група от избор.

Пример за деактивирана група:

<select class="form-select">
  <optgroup label="Налични продукти">
    <option>Продукт A</option>
    <option>Продукт B</option>
  </optgroup>
  <optgroup label="Изчерпани" disabled>
    <option>Продукт C</option>
    <option>Продукт D</option>
  </optgroup>
</select>

Използването на <optgroup> подобрява достъпността, тъй като помощните технологии (екранни четци) съобщават имената на групите и така потребителите по-лесно разбират структурата на опциите.

Browser Support

Browser	Поддръжка
Chrome	✔️
Firefox	✔️
Edge	✔️
Safari	✔️
Opera	✔️

Атрибути

Този елемент няма собствени специфични атрибути, но поддържа следните стандартни атрибути:

Атрибут	Описание
`label`	Задължителен атрибут, който задава видимото име (заглавие) на групата опции.
`disabled`	Булев атрибут. Ако е зададен, всички опции в групата стават неизбираеми.

Тагове

a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fencedframe fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup hr html i iframe img input ins kbd label legend li link main map mark menu meta meter nav noscript object ol optgroup option output p picture pre progress q rp rt ruby s samp script search section select selectedcontent slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr

HTML таг optgroup