HTML-тег `<optgroup>`

Тег <optgroup> группирует элементы <option> внутри <select>. Обязательный атрибут label — заголовок группы (часто жирным); пункты внутри визуально сдвигаются.

<optgroup> — элемент формы.

Синтаксис

Парный тег.

Пример

Выпадающий список с группами

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <select>
      <optgroup label="Books">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
      </optgroup>
      <optgroup label="Snippets">
        <option value="java">Java</option>
        <option value="linux">Linux</option>
        <option value="git">Git</option>
      </optgroup>
    </select>
  </body>
</html>

Браузер покажет две группы: Books и Snippets.

Атрибут disabled

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <select>
      <optgroup disabled="disabled" label="Quizzes">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
      </optgroup>
      <optgroup label="Snippets">
        <option value="git">Git</option>
        <option value="angularjs">AngularJS</option>
      </optgroup>
    </select>
  </body>
</html>

Атрибуты

Атрибут	Значение	Описание
disabled	disabled	Группа недоступна для выбора.
label	текст	Подпись группы (обязательно).

Также глобальные атрибуты и атрибуты событий.

Стилизация

css

optgroup {
  font-weight: bold;
  color: #333;
}
optgroup option {
  font-weight: normal;
  padding-left: 15px;
}

Practice

Назначение HTML-тега optgroup?

Группирует связанные option в выпадающем списке.Вставляет изображения.Позволяет категоризировать пункты с подписями.Создаёт гиперссылку.Создаёт текстовые поля формы.

HTML-тег <optgroup> ​

Синтаксис ​

Пример ​

Атрибут disabled ​