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

Тег <select> вкладывается в тег <form>, если данные списка должны быть отправлены на сервер, или когда к данным списка обращаются через скрипты.

Синтаксис

Тег <option> парный, закрывающий тег (</option>) обязателен.

Тег <option> используется, как правило, с атрибутом value, чтобы указать какое значение отправляется на сервер для дальнейшей обработки.

Пример

<!DOCTYPE html>
<html>
   <head>
      <title>Заголовок окна веб-страницы</title>
   </head>
   <body>
	<form>
   	    <select>
     		<option value="computers">Настольный компьютер</option>
     	 	<option value="notebook">Планшетный компьютер</option>
      		<option value="tablet">Портативный компьютер</option>
  	   </select>
	</form>
   </body>
</html>

Результат

optionexample1

Пример

<!DOCTYPE html>
<html>
   <head>
      <title>Заголовок окна веб-страницы</title>
   </head>
   <body>
      <p>Аэропорт вылета:</p>
      <form action="action_form.php" method="get">
          <input type = "text" list = "airports" name="airports"> 
          <datalist id = "airports">
            <option value = "Санкт-Петербург">
            <option value = "Краснодар">
            <option value = "Москва">
            <option value = "Новосибирск">
          </datalist> 
          <input type = "submit" value = "подтвердить">
       </form>
 </body>
</html>

В этом примере тег <option> вложен в тег <datalist>.

Результат

optionexample2


Атрибуты

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

Тег <option> поддерживает также глобальные атрибуты и атрибуты событий.

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

chrome edge firefox safari opera

Практикуйте свои знания

What attributes are used for the <Option> HTML tag?
Считаете ли это полезным?