HTML тег <option>

HTML теги

Значение и применение

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

Пункты списка (<option>) внутри раскрывающегося списка <select> могут группироваться элементом <optgroup>.

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

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<option>ДаДаДаДаДаДа

Атрибуты

АтрибутЗначениеОписание
disableddisabledЛогический атрибут, который указывает, что параметр должен быть отключен.
labeltextЯвляется текстом надписи, указывающей значение параметра. Если атрибут не указан, то его значением выступает содержимое элемента <option>.
selectedselectedЛогический атрибут, который указывает, что параметр должен быть предварительно выбран при загрузке страницы. Атрибут может быть применен только к одному элементу <option> в раскрывающемся списке (элемент <select>).
valuetextУказывает значение, которое будет отправлено на сервер при отправке формы. Если указывается в составе списка предопределённых вариантов (<datalist>html5), то поиск осуществляется по значению атрибута, если атрибут отсутствует, то по содержимому элемента, при этом необходимо использовать закрывающий элемент </option>

Пример использования

Элемент <option> может быть использован без каких-либо атрибутов, но обычно содержит атрибут со значением, которое отправляется и обрабатывается на стороне сервера.

В данном примере рассмотрено применение атрибута selected HTML тега <option>, который определяет какой параметр будет предварительно выбран внутри списка:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования HTML тега <option> в раскрывающемся списке</title>
	</head>
	<body>
		<select name = "blacklist">
			<option value = "2PAC">Tupac Amaru Shakur</option>
			<option value = "50cent">Curtis Jackson</option>
			<option value = "Snoop Dogg"selected>Calvin Cordozar Broadus, Jr.</option> <!--параметр, который будет предварительно выбран -->
		</select>
	</body>
</html>

В этом примере мы тегом <select> создали раскрывающийся список, внутри него мы поместили три элемента <option>, которые определяют его пункты. Атрибутом selected указали, что третий пункт предопределен (будет выбран по умолчанию вместо первого).

Обращаю Ваше внимание на то, что необходимо использовать атрибут value (значение) тега <option>, чтобы указать какое значение отправляется на сервер для дальнейшей обработки.

В браузере это выглядит следующим образом:

Пример использования HTML тега <option> в раскрывающемся списке.
Пример использования HTML тега <option> в раскрывающемся списке

Давайте рассмотрим пример в котором используются раскрывающийся список (<select>) и список предопределенных вариантов для ввода (<datalist>html5). Список предопределенных вариантов мы подключим атрибутом listhtml5 внутри однострочного текстового поля (тег <input>).

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

Обращаю Ваше внимание, что если в списке предопределённых вариантов (<datalist>html5) используется атрибут value, то поиск осуществляется по нему, если атрибут отсутствует, то по содержимому элемента, при этом необходимо использовать закрывающий элемент </option>.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута label HTML тега <option></title>
	</head>
	<body>
		<form action = "#"> <!-- адрес передачи данных при отправке формы (относительный, либо абсолютный URL)-->
			<fieldset> <!--группируем элементы формы-->
				<legend>Составление маршрута</legend> <!--заголовок для элемента <fieldset> -->
				Город отправления:
				<select> <!--раскрывающийся список-->
					<option  label = "Владивосток">
					<option  label = "Анапа">
					<option  label = "Москва">
					<option  label = "Смоленск">
					<option  label = "Якутск">
				</select>
					<p>Аэропорт назначения:
						<input type = "text" list = "airports"> <!-- ссылаемся на список предопределенных вариантов --> 
					</p>
				<datalist id = "airports"> <!--Список предопределенных вариантов для ввода-->
					 <option value = "VVO" label = "Владивосток">
					 <option value = "MEM" label = "Анапа">
					 <option value = "VKO" label = "Москва Внуково">
					 <option value = "LNX" label = "Смоленск">
					 <option value = "YKS" label = "Якутск">
				</datalist>	
				<input type = "submit" value = "подтвердить"> <!--кнопка отправки формы -->
			</fieldset>
		</form>
	</body>
</html>

В браузере это выглядит следующим образом:

Пример использования атрибута label HTML тега <option> (текст надписи, которая указывает значение параметра).
Пример использования атрибута label HTML тега <option> (текст надписи, которая указывает значение параметра).

Отличия HTML 4.01 от HTML 5

Нет.

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

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

Элемент поддерживает "атрибуты событий".

HTML теги