Пример
Создайте выпадающий список с четырьмя вариантами:
<label for="cars">Выберите автомобиль:</label>
<select
name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Попробуйте сами »
Другие примеры "Попробуйте сами" ниже.
Определение и использование
Элемент <select> используется для создания выпадающего списка.
Элемент <select> чаще всего используется в форме для сбора пользовательского ввода.
Атрибут name необходим для ссылки на данные формы после её отправки (если опустить атрибут name, данные из выпадающего списка не будут отправлены).
Атрибут id необходим для связывания выпадающего списка с меткой (<label>).
Теги <option> внутри элемента <select> определяют доступные варианты в выпадающем списке.
Совет: Всегда добавляйте тег <label> для лучшей практики доступности!
Поддержка браузерами
| Элемент | |||||
|---|---|---|---|---|---|
| <select> | Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| autofocus | autofocus | Указывает, что выпадающий список должен автоматически получать фокус при загрузке страницы |
| disabled | disabled | Указывает, что выпадающий список должен быть отключен |
| form | form_id | Определяет, какой форме принадлежит выпадающий список |
| multiple | multiple | Указывает, что можно выбрать сразу несколько вариантов |
| name | name | Определяет имя для выпадающего списка |
| required | required | Указывает, что пользователь должен выбрать значение перед отправкой формы |
| size | number | Определяет количество видимых вариантов в выпадающем списке |
Глобальные атрибуты
Тег <select> также поддерживает Глобальные атрибуты в HTML.
Атрибуты событий
Тег <select> также поддерживает Атрибуты событий в HTML.
Больше примеров
Пример
Использование <select> с тегами <optgroup>:
<label for="cars">Выберите автомобиль:</label>
<select
name="cars" id="cars">
<optgroup label="Шведские автомобили">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Немецкие автомобили">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Попробуйте сами »
Связанные страницы
Справочник по HTML DOM: Объект Select
Учебник CSS: Стилизация форм
Настройки CSS по умолчанию
Нет.