<option> HTML

Тег <option> (от англ. option — пункт, параметр, опция) определяет отдельные пункты списка, создаваемого с помощью контейнера <select>.

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

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

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

WAI ARIA

Значение role по умолчанию: option

Атрибуты

  • disabled — Заблокировать для доступа элемент списка.
  • label — Указание метки пункта списка.
  • selected — Заранее устанавливает определённый пункт списка выделенным.
  • value — Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.

Также для этого элемента доступны универсальные атрибуты и события.

disabled

Блокирует элемент списка для его выбора.

Синтаксис

    <option disabled>...</option>

Значения

Нет.

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

По умолчанию этот атрибут выключен.

label

Атрибут предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри <option>. Если атрибут label присутствует, то текст внутри <option> игнорируется и в списке выводится значение label.

Синтаксис

<option label="<текст>">...</option>

Значения

Любая текстовая строка.

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

Нет.

selected

Делает текущий пункт списка выделенным. Если к элементу <select> добавлен атрибут multiple, то можно выделять более одного пункта списка.

Синтаксис

<option selected>...</option>

Значения

Нет.

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

По умолчанию этот атрибут выключен.

value

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение», где имя задаётся атрибутом name элемента <select>, а значение — атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным. Также атрибут value применяется для получения значений данных через скрипты.

Синтаксис

<option value="<текст>">...</option>

Значения

Любая текстовая строка.

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

Нет.

Спецификации

Примеры

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>OPTION</title>
    </head>
    <body> 
        <form action="option2.php">
            <p>
                <select size="3" name="hero">
                    <option disabled>Выберите рыцаря</option>
                    <option value="t1" selected>Гавейн</option>
                    <option value="t2">Ланселот</option>
                    <option value="t3">Галахэд</option>
                    <option value="t4">Персиваль</option>
                </select>
            </p>
            <p><input type="submit" value="Отправить"></p>
        </form>
    </body>
</html>