Тема:

<option> - HTML-елемент опції

HTML-елемент <option> використовується для визначення елемента (опції) в межах елементів <select>, <optgroup> або <datalist>.

Елемент <option> створює окремий пункт у випадаючому списку або списку пропозицій. Текст, що знаходиться всередині тега, відображається користувачеві, а значення, яке надсилається на сервер, визначається атрибутом value. Якщо атрибут value не вказано, його значенням за замовчуванням стає текст, що міститься всередині елемента <option>.

Синтаксис

HTML
<option value="значення">Текст опції</option>

Атрибути

Цей тег може мати глобальні атрибути.

value

Значення, яке надсилається на сервер при виборі цієї опції. Якщо цей атрибут не вказано, використовується текстовий вміст елемента.

label

Надає альтернативну, коротшу мітку для опції. Якщо атрибут label вказано, браузери відображають його значення. Якщо ні — відображається текстовий вміст елемента.

selected

Булевий атрибут, який вказує, що ця опція має бути вибрана за замовчуванням при завантаженні сторінки. В одному елементі <select> без атрибута multiple може бути лише одна опція з цим атрибутом.

disabled

Булевий атрибут, який вимикає опцію, роблячи її неможливою для вибору.

Технічне резюме

Категорія контенту

Немає.

Дозволений вміст

Текст, можливо, з екранованими символами (наприклад, &amp; для амперсанда).

Пропуск тегів

Кінцевий тег може бути пропущений, якщо за ним слідує інший елемент <option> або <optgroup>, або якщо батьківський елемент більше не має вмісту.

Дозволені батьківські елементи

Елемент <select>, <optgroup>, або <datalist>.

Роль ARIA

option

DOM інтерфейс

HTMLOptionElement

Приклади використання

Результат
<label for="pet-select">Оберіть домашнього улюбленця:</label>
<select name="pets" id="pet-select">
  <option value="">--Будь ласка, оберіть опцію--</option>
  <option value="dog">Собака</option>
  <option value="cat">Кіт</option>
  <option value="hamster" selected>Хом’як</option>
  <option value="parrot" disabled>Папуга</option>
</select>

Підтримка браузерів

<option>
disabled
label
selected
value

Останнє оновлення: