HTML-тег <option>

HTML-тег <option> используется для определения пунктов в раскрывающемся списке, созданном с помощью элемента <select> . Каждый <option> представляет один доступный для выбора пункт. Пользователи могут выбрать один или несколько пунктов в зависимости от конфигурации элемента <select> (например, выбор одного или нескольких пунктов).

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

Базовый синтаксис тега HTML <option>

Базовая структура элемента выбора внутри раскрывающегося списка: 

<select>
    <option value="value1">Option 1</option>
    <option value="value2">Option 2</option>
</select>

Атрибут value определяет данные, отправляемые на сервер при отправке формы, а содержимое внутри <option> — это то, что пользователи видят в раскрывающемся списке.

Пример раскрывающегося списка с использованием тега option

Вот пример раскрывающегося меню с использованием тега <option> : 

<!DOCTYPE html>
<html>
    <body>
        <h2>Choose a Fruit</h2>
        <select>
            <option value="apple">Apple</option>
            <option value="banana">Banana</option>
            <option value="cherry">Cherry</option>
        </select>
    </body>
</html>
Пример раскрывающегося списка с использованием тега option

Пояснение: Раскрывающийся список содержит три варианта: «Яблоко», «Банан» и «Вишня». Когда пользователь выбирает элемент, на сервер отправляется соответствующий атрибут value .

Атрибуты HTML-тега <option>

  • значение: указывает значение, связанное с параметром, которое отправляется на сервер при отправке.
  • выбрано: отмечает параметр как выбранный по умолчанию элемент при загрузке страницы.
  • отключено: отключает опцию, делая ее недоступной для выбора пользователем.
  • метка: содержит краткое описание параметра, часто используется в целях доступности.
  • Глобальные атрибуты: поддерживает глобальные атрибуты, такие как id , class и style .

Например, вы можете сделать опцию выбранной или отключенной: 

<select>
    <option value="apple" selected>Apple</option>
    <option value="banana" disabled>Banana(Unavailable)</option>
    <option value="cherry">Cherry</option>
</select>

Результат: «Яблоко» предварительно выбрано, а «Банан» неактивен и не может быть выбран.

Стилизация тега <option> с помощью CSS

Тег <option> можно стилизовать с помощью CSS, хотя его внешний вид внутри раскрывающихся меню может быть ограничен стилями браузера по умолчанию. Вы можете оформить раскрывающиеся списки следующим образом: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            select {
                width: 200px;
                padding: 5px;
                font-size: 16px;
            }
            option {
                color: #007BFF;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <h2>Styled Dropdown</h2>
        <select>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </body>
</html>

Результат: раскрывающееся меню и параметры оформлены с использованием пользовательских шрифтов и цветов.

Использование множественного выбора

Чтобы разрешить пользователям выбирать несколько вариантов, добавьте атрибут multiple к элементу <select> : 

<select multiple>
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="bird">Bird</option>
</select>

Объяснение: Атрибут multiple позволяет пользователям выбирать более одного варианта с помощью Ctrl (Windows) или Cmd (Mac).

Практическое применение тега <option>

  • Формы: создавайте раскрывающиеся меню в формах для выбора таких параметров, как страны, штаты или категории.
  • Фильтры поиска: предоставьте пользователям раскрывающийся список для фильтрации или сортировки результатов по определенным критериям.
  • Динамический контент: динамическое заполнение раскрывающихся списков с помощью JavaScript для создания интерактивного контента для пользователя.
  • Доступность: Объедините атрибуты label и disabled для создания понятных и доступных раскрывающихся списков.