HTML тег - optgroup - определение и примеры использования
Меню
Веб-разработка
Тег optgroup HTML

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


Тег <optgroup> - синтаксис и код

Тег <optgroup> представлен парами. Содержимое записывается между открывающим (<optgroup>) и закрывающим (</optgroup>) тегами.

Пример группировки связанных параметров с помощью тегов <optgroup>:

<label for="cars">Выберите Автомобиль:</label>

<select name="cars" id="cars">
  <optgroup label="Немецкие Автомобили">
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
  </optgroup>
  <optgroup label="Шведские Автомобили">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
  </optgroup>
</select>


Определение и использование

  • Тег <optgroup> используется для группировки связанных параметров в элементе select (раскрывающийся список);
  • HTML - тег <optgroup> считается элементом формы;
  • Если у вас длинный список параметров, пользователю будет легче обрабатывать группы связанных параметров;
  • Содержимое тега <optgroup> выглядит как заголовок, выделенный жирным шрифтом;
  • Элементы, содержащиеся в теге <option>, смещаются вправо.
★ Примечание: элемент optgroup обычно используется с атрибутом value, чтобы указать, какое значение отправляется на сервер для дальнейшей обработки

Поддержка <optgroup> браузерами

Chrome Поддерживает
Yandex Browser Поддерживает
Edge Поддерживает
Firefox Поддерживает
Safari Поддерживает
Opera Поддерживает

Атрибуты

Атрибут Значение Описание
disabled disabled Указывает, что группа параметров должна быть отключена
label text Указывает метку для группы параметров

Глобальные атрибуты

Тег <optgroup> также поддерживает глобальные атрибуты в HTML

Атрибуты событий

Тег <optgroup> также поддерживает атрибуты событий в HTML


Настройки CSS по умолчанию

Отсутствуют.


Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

 

Поделиться ссылкой