HTML :: Тег <option>

В HTML тег <option> (от англ. option – вариант, выбор) используется для создания пунктов списка (вариантов ответа) элементов <select> и <datalist>.

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

Синтаксис

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

Атрибуты

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

Ссылки

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

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

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>
	
  <form action="php/reg.php" method="POST" name="reg_form">
     
    Укажите спортивный разряд: <br><br>     
    <!-- Создаем раскрывающийся список -->
    <select name="category">
      <option value="0">отсутствует</option>
      <option value="3" label="3-й">3-й взрослый</option>
      <option value="2" label="2-й">2-й взрослый</option>
      <option value="1" label="1-й">1-й взрослый</option>
      <option value="kms">КМС</option>
      <option value="ms">МС</option>
      <option value="msmk">МСМК</option>
    </select> <br><br> 
     
    Выберите виды спорта: <br><br>
    <!-- Изначально будет видно три пункта, но выбирать можно -->
    <!-- сразу несколько пунктов при нажатой клавише ctrl -->
    <select name="sport[]" size="3" multiple>
      <option value="0" selected>Бокс</option>
      <option value="1">Вольная борьба</option>
      <option value="2">Дзюдо</option>
      <option value="3">Каратэ</option>
      <option value="4">Таэквондо</option>
    </select> <br><br> 
     
    <button type="submit" disabled>Отправить</button>
  </form>	
	
</body>
</html>

Пример №1