Тег <select>: выбор из вариантов
Как создать список вариантов с понятными значениями и видимой подписью.
Зачем нужен этот элемент
select позволяет выбрать значение из заранее заданного набора. Варианты создаются элементами option, а тематические группы — optgroup. В большинстве простых форм нативный список удобнее самодельного: браузер уже знает, как управлять им с клавиатуры.
Текст option видит пользователь, значение value получает сервер. У select должен быть name и связанный label. Не применяйте выпадающий список для двух вариантов, если обычные радиокнопки будут понятнее и займут достаточно места.
Синтаксис и пример
<label for="topic">Тема вопроса</label>
<select id="topic" name="topic">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="hosting">Публикация сайта</option>
</select>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| option value | Значение для серверного обработчика. |
| selected | Начально выбранный вариант. |
| multiple | Разрешение выбрать несколько значений. |
| optgroup label | Название группы вариантов. |
Частая ошибка
Не запускайте неожиданный переход при простом выборе варианта. Если меняется страница или отправляется форма, предусмотрите явную кнопку.
Небольшая практика
Добавьте новый вариант «Доступность» и выберите его клавиатурой. Сохраните короткие и различимые названия.
Разберите также <label>, <form>: эти элементы пригодятся в том же интерфейсе.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.