W3docs
ru
Войти

HTML-тег <option>

The <option> tag identifies items in a drop-down list. Tag description, attributes and examples of usage.

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

Оборачивайте тег <select> в элемент <form> только в том случае, если вам нужно отправить выбранные данные на сервер или получить к ним доступ через скрипты.

Синтаксис

Тег <option> может быть записан в виде парного тега или самозакрывающегося тега. При использовании в виде парного тега отображаемый текст записывается между открывающим (<option>) и закрывающим (</option>) тегами.

success

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

Пример HTML-тега <option>:

Раскрывающийся список с HTML-тегом <option>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <select>
        <option value="computers">Computer</option>
        <option value="notebook">Notebook</option>
        <option value="tablet">Tablet</option>
      </select>
    </form>
  </body>
</html>
Попробуйте сами »

Результат

Computer Notebook Tablet ---

Пример HTML-тега <option> с тегом <datalist>.

Список аэропортов вылета с тегом option

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Departure airport:</p>
    <form action="action_form.php" method="get">
      <input type="text" list="airports" name="airports" />
      <datalist id="airports">
        <option>Birmingham</option>
        <option>Cambridge</option>
        <option>Oxford</option>
        <option>Bangor</option>
      </datalist>
      <input type="submit" value="confirm" />
    </form>
  </body>
</html>
Попробуйте сами »

В этом примере теги <option> размещены внутри тега <datalist> без атрибута value, поскольку текстовое содержимое служит подсказкой для автозаполнения.

Результат

Атрибуты

АтрибутЗначениеОписание
disableddisabledУказывает, что выбор элемента отключён.
labeltextОпределяет имя для элемента списка.
selectedselectedУстанавливает, что опция должна быть выбрана по умолчанию при загрузке страницы.
valuetextОпределяет значение, которое отправляется на сервер.

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

Пример с атрибутами selected и disabled:

<select>
  <option value="red">Red</option>
  <option value="blue" selected>Blue</option>
  <option value="green" disabled>Green</option>
</select>

Практика

Практика

Каковы характеристики и области применения HTML-тега <option>?