Тег <select>
Описание
Тег <select> создает выпадающий список (dropdown) или список с множественным выбором в HTML-формах. Это интерактивный элемент формы, позволяющий пользователю выбрать одно или несколько значений из предложенных вариантов.
<select name="country">
<option value="ru">Россия</option>
<option value="us" selected>США</option>
<option value="de">Германия</option>
</select>
<!-- Простой выпадающий список -->
<label for="city">Город:</label>
<select id="city" name="city">
<option value="">-- Выберите город --</option>
<option value="moscow">Москва</option>
<option value="spb">Санкт-Петербург</option>
</select>
<!-- Множественный выбор -->
<select name="skills" multiple size="4">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>
<!-- Группировка вариантов -->
<select name="car">
<optgroup label="Немецкие">
<option>BMW</option>
<option>Audi</option>
</optgroup>
<optgroup label="Японские">
<option>Toyota</option>
<option>Honda</option>
</optgroup>
</select>
Ключевые особенности:
- Может содержать только
<option>или<optgroup> - По умолчанию позволяет выбрать один вариант
- С атрибутом multiple превращается в список с множественным выбором
- Поддерживает все стандартные атрибуты формы
- Может быть стилизован через CSS (с ограничениями)
Рекомендации по использованию:
- Всегда используйте с
<label>для доступности - Для обязательного выбора добавляйте атрибут required
- Первым вариантом делайте пустую подсказку (для обязательных полей)
- Для большого количества вариантов используйте поиск или группировку
- Рассмотрите кастомные решения для сложных сценариев выбора
Тег <select> является стандартным элементом форм для выбора одного или нескольких значений из списка вариантов, обеспечивая удобный интерфейс для пользователей.
Атрибуты
| autofocus | Автоматический фокус при загрузке |
| disabled | Отключает элемент select |
| form | Связывает select с формой |
| multiple | Разрешает множественный выбор |
| name | Имя для отправки данных |
| required | Обязательное поле |
| size | Количество видимых вариантов |
| accesskey | Горячая клавиша для активации |
| class | CSS-классы для стилизации |
| id | Уникальный идентификатор |
| style | Инлайновые стили |
| tabindex | Порядок перехода |
| title | Всплывающая подсказка |
| hidden | Скрывает элемент |
| lang | Язык содержимого |
| spellcheck | Проверка орфографии |
| translate | Определяет возможность перевода |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 3.0 | 1.0 | 4.0 | 1.0 | 1.0 |