HTML :: Тег <optgroup>

В HTML тег <optgroup> (от англ. option group – группа вариантов) используется для группировки по логическому или иному признаку пунктов <option> раскрывающегося списка <select>.

Закрывающий тег элемента <optgroup> может быть опущен, если он является последним элементом внутри родительского элемента <select> или сразу после него находится следующий элемент <optgroup>.

Синтаксис

	<select>
		<optgroup label="Заголовок группы">
			...
			<option>...</option>
			...
		</optgroup>	
	</select>

	Закрывающий тег: не обязателен.

Атрибуты

disabled – данный логический атрибут блокирует доступ к группе пунктов <option>. Атрибут по умолчанию выключен и значений не принимает.
label – устанавливает заголовок для группы пунктов <option>.
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/form-elements.html#the-optgroup-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/optgroup

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>
	
  <form action="php/quiz.php" method="POST" name="quiz_form">
     
    Укажите любимые фрукты и овощи: <br><br>   
     
    <select name="fruits_vegetables" multiple size="3">
       
      <optgroup label="Фрукты"> 
        <option value="apple">Яблоки</option>
        <option value="pear">Груши</option>
        <option value="orange">Апельсины</option>
      </optgroup> 
       
      <optgroup label="Овощи">
        <option value="carrot">Морковь</option>
        <option value="beet">Свекла</option>
        <option value="potato">Картофель</option>
      </optgroup> 
       
    </select>     <br><br> 
     
    <button type="submit" disabled>Отправить</button>
  </form>	
	
</body>
</html>

Пример №1