Перейти к содержанию

<option>

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

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

Демо

Формы

Синтаксис

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

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

Атрибуты

disabled

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

label

Указание метки пункта списка.

selected

Заранее устанавливает определённый пункт списка выделенным.

value

Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.

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

disabled

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

Синтаксис

1
<option disabled>...</option>

Значения

Нет.

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

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

label

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

Синтаксис

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

Значения

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

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

Нет.

selected

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

Синтаксис

1
<option selected>...</option>

Значения

Нет.

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

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

value

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

Синтаксис

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

Значения

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

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

Нет.

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

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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>

Ссылки

Комментарии