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