HTML - тег <select>
Пример
Создайте раскрывающийся список с четырьмя вариантами:
<label for="cars">Choose a car:</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необходим, чтобы связать выпадающий список с меткой.
Теги <option> внутри элемента <select>определяют доступные параметры в раскрывающемся списке.
Совет. Всегда добавляйте тег <label> , чтобы улучшить доступность!
Поддержка браузера
| Element | |||||
|---|---|---|---|---|---|
| <select> | Yes | Yes | Yes | Yes | Yes |
Атрибуты
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Specifies that the drop-down list should automatically get focus when the page loads |
| disabled | disabled | Specifies that a drop-down list should be disabled |
| form | form_id | Defines which form the drop-down list belongs to |
| multiple | multiple | Specifies that multiple options can be selected at once |
| name | name | Defines a name for the drop-down list |
| required | required | Specifies that the user is required to select a value before submitting the form |
| size | number | Defines the number of visible options in a drop-down list |
Глобальные атрибуты
Тег <select>также поддерживает глобальные атрибуты в HTML .
Атрибуты события
Тег <select>также поддерживает атрибуты событий в HTML .
Дополнительные примеры
Пример
Используйте <select> с тегами <optgroup>:
<label for="cars">Choose a car:</label>
<select
name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Связанные страницы
Справочник по HTML DOM: выберите объект
Учебник по CSS: стилизация форм
Настройки CSS по умолчанию
Никто.