Тег <option>

Синтаксис

<select>
    <option>...</option>
</select>

или

<select>
    <optgroup label="...">
        <option>...</option>
    </optgroup>
</select>

или

<input>
<datalist>
    <option>...</option>
</datalist>

Описание

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

Тег может быть вложен в контейнеры <select>, <optgroup> или <datalist>.

Когда планируется отправлять данные списка на сервер, то требуется поместить тег <select> внутрь контейнера <form>.

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

Атрибуты

Атрибут Значение Описание
disabled disabled

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

Пример

HTML-код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Тег option</title>
</head>
<body>
    <select>
        <option>HTML</option>
        <option>CSS</option>
        <option>JavaScript</option>
        <option>React</option>
    </select>
</body>
</html>

Отображение в браузере:

Параметры CSS по умолчанию

option {
    font-weight: normal;
    display: block;
    white-space-collapse: collapse;
    text-wrap: nowrap;
    min-height: 1.2em;
    padding: 0px 2px 1px;
}

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

Элемент

Chrome

Chrome

Opera

Opera

Firefox

Firefox

Safari

Safari

Microsoft Edge

Microsoft Edge
<option> Да Да Да Да Да