HTML-тег <select>

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

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

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

Базовая структура элемента <select> :

<select name="dropdown">
    <option value="value1">Option 1</option>
    <option value="value2">Option 2</option>
    <option value="value3">Option 3</option>
</select>

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

Пример простого выпадающего меню

Вот пример раскрывающегося меню, в котором пользователи могут выбрать фрукт:

<!DOCTYPE html>
<html>
    <body>
        <h2>Choose a Fruit</h2>
        <form>
            <label for="fruits">Select your favorite fruit:</label>
            <select id="fruits" name="fruits">
                <option value="apple">Apple</option>
                <option value="banana">Banana</option>
                <option value="cherry">Cherry</option>
            </select>
        </form>
    </body>
</html>

Пояснение: Пользователь может выбрать один вариант(например, «Apple») из выпадающего меню. При отправке формы выбранное значение(например, «apple») отправляется на сервер.

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

Имя: Указывает имя раскрывающегося списка для отправки формы.
id: предоставляет уникальный идентификатор для элемента <select> .
множественный: позволяет сделать множественный выбор при добавлении к тегу <select> .
размер: определяет количество видимых вариантов в раскрывающемся списке.
отключено: отключает раскрывающийся список, делая его недоступным для выбора.
Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как class , style и data-* .

Например, добавление атрибута multiple позволяет пользователям выбирать более одного варианта:

<select name="fruits" multiple>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
</select>

С помощью атрибута multiple пользователи могут удерживать Ctrl (Windows) или Cmd (Mac), чтобы выбрать несколько вариантов.

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

Вы можете настроить внешний вид раскрывающегося списка <select> с помощью CSS:

<!DOCTYPE html>
<html>
    <head>
        <style>
            select {
                width: 200px;
                padding: 5px;
                font-size: 16px;
                border: 1px solid #ccc;
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <h2>Styled Dropdown</h2>
        <select>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </select>
    </body>
</html>

При нажатии на раскрывающийся список вы увидите следующий список вариантов для выбора.

Оформление тега select с помощью CSS — Параметры

Результат: выпадающее меню имеет пользовательскую ширину, отступы и скругленные углы.

Пример сгруппированных вариантов

Параметры можно сгруппировать с помощью тега <optgroup> :

<select name="cars">
    <optgroup label="Toyota">
        <option value="corolla">Corolla</option>
        <option value="camry">Camry</option>
    </optgroup>
    <optgroup label="Ford">
        <option value="focus">Focus</option>
        <option value="mustang">Mustang</option>
    </optgroup>
</select>

Пояснение: Опции разделены на категории «Toyota» и «Ford», что улучшает организацию выпадающего меню.

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

Формы: используйте раскрывающиеся списки для сбора вводимых пользователем данных, например выбора страны, штата или категории.
Фильтры: создайте раскрывающиеся меню для фильтрации результатов поиска или сортировки элементов.
Настройки: Разрешите пользователям изменять такие настройки, как темы или языки.
Параметры множественного выбора: позволяют пользователям выбирать несколько элементов в приложениях, например в корзинах покупок.

Тег <select> — это мощный и универсальный элемент управления формой для создания раскрывающихся меню, которые повышают интерактивность пользователя и сбор данных.