Тег <option>

Тег <option> (укр. – “опція”) в HTML використовується для визначення окремих елементів у списку, створеному за допомогою тегів <select>, <optgroup> або інших подібних елементів. Він дозволяє користувачам вибирати один або кілька варіантів із списку. Кожен елемент <option> є варіантом, який можна вибрати, і має текст, який відображається в інтерфейсі користувача.

Атрибути

Специфічні атрибути

  • value — вказує значення, яке буде надіслано на сервер, якщо цей варіант буде обраний. Якщо атрибут value не заданий, використовується текстовий вміст варіанту. Наприклад:
<option value="apple">Яблуко</option>
<option value="banana">Банан</option>
  • selected — визначає, який варіант є вибраним за замовчуванням, коли сторінка завантажується. Це значення додається до одного з варіантів, щоб він був вибраний при первинному завантаженні форми. Наприклад:
<option value="apple" selected>Яблуко</option>
<option value="banana">Банан</option>

Глобальні атрибути

Тег <option> підтримує всі глобальні атрибути HTML, зокрема:

  • id — унікальний ідентифікатор для елемента. Наприклад:
<option id="apple" value="apple">Яблуко</option>
  • class — задає клас для застосування стилів через CSS. Наприклад:
<option class="fruit" value="apple">Яблуко</option>
  • style — дозволяє додавати інлайн-стилі до елемента. Наприклад:
<option style="color: red;" value="apple">Яблуко</option>
  • title — текстовий опис для елемента, який може відображатися при наведенні курсора. Наприклад:
<option title="Це дуже смачне яблуко" value="apple">Яблуко</option>

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

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання <option></title>
</head>
<body>
    <label for="fruit">Оберіть фрукт:</label>
    <select id="fruit" name="fruit">
        <option value="apple" selected>Яблуко</option>
        <option value="banana">Банан</option>
        <option value="cherry">Вишня</option>
    </select>
</body>
</html>

Додаткові моменти

  • Тег <option> використовується лише всередині тегів <select>, <optgroup> та в контексті форми, щоб запропонувати користувачам варіанти вибору.
  • Атрибут selected може бути використаний для попереднього вибору опції при завантаженні сторінки, але лише один елемент <option> може бути вибраний за замовчуванням в межах одного списку <select>.
  • Тег <option> підтримує використання текстових та графічних значень. Ви можете додавати стилі або текст для кращого відображення варіантів у списку.
  • Тег <option> не може бути самостійно використаний без контейнера <select>, оскільки він є частиною списку варіантів, який потрібно впорядкувати за допомогою <select>.