Select в HTML
Ранее textarea собирал свободный многострочный текст. Select — другая задача: выбрать ответ из фиксированного списка, а не печатать свободно.
Зачем нужен select
Доставка, меню и настройки нуждаются в закрытом наборе. Свободный ввод портит данные; выбор teh из списка — нет. select — элемент управления; каждый option — вариант. По-прежнему нужны label и name на select.
Прямой ответ
1) select с option. 2) Свяжите label. 3) name на select; value на option. 4) Опционально пустой пункт, selected, disabled, optgroup. 5) Выбор из списка — не абзацы textarea.
📊 Select pieces beginners use
| Piece | Role | Beginner tip |
|---|---|---|
| select | Choice container | Owns name= for the submitted field key |
| option | One choice | value= is what posts; text is what users see |
| optgroup | Section header | Groups options; not itself submitted |
| name (on select) | Submit key | Required if the choice should post |
| id (on select) | Label hook | Match label for= |
| value (on option) | Submitted token | Prefer short stable codes (teh, salad) |
| selected | Default pick | At most one in a single-select list |
| disabled (option) | Unavailable | Shown but not choosable |
Доставка: select города
Заметка — однострочный input; город — select. Сначала Choose с пустым value. Коды teh/isf уходят в submit.
<form action="/ship" method="post">
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Choose…</option>
<option value="teh">Tehran</option>
<option value="isf">Isfahan</option>
<option value="shir">Shiraz</option>
</select>
<label for="note">Delivery note</label>
<input id="note" name="note" type="text" placeholder="Gate code, floor…">
<button type="submit">Continue</button>
</form>
Читаем демо города
- Список — select, не textarea
- id связан с label for
- name — ключ отправки
- У каждого option короткий value
- Пустой value мешает случайному default
- required до реального города
- Заметка — однострочный input
Блюда с optgroup
Второе демо Veg/Other. selected по умолчанию; disabled если нет в наличии.
<label for="meal">Meal</label>
<select id="meal" name="meal">
<optgroup label="Veg">
<option value="salad">Salad</option>
<option value="soup" selected>Soup</option>
</optgroup>
<optgroup label="Other">
<option value="stew">Stew</option>
<option value="grill" disabled>Grill (sold out)</option>
</optgroup>
</select>
Читаем демо блюда
- optgroup — заголовок секции, не значение submit
- value берётся у выбранного option
- selected на Soup
- disabled на Grill
- Всегда label и name
- дальше: datalist для подсказок с набором текста
Select vs textarea vs input
- Известный список: select
- Свободные абзацы: textarea
- Короткая строка: input
- name на select; value на option
- Всегда label
- Не пишите список в textarea
Практика — собрать и сгруппировать
- Четвёртый город с коротким value
- Смените Choose; оставьте value пустым
- Проверьте без required и верните
- Переместите Soup между группами
- Проверьте disabled у Grill
- Фраза: select шлёт value; textarea — свободный текст
- Подсказки с набором — следующий datalist
Частые ошибки
- Нет value, когда нужен код
- Забыли name на select
- Нет label
- Варианты в textarea
- Длинный список без optgroup
- name на каждом option
- Путаница с datalist
Итог
- select + option = выбор из списка
- label и name на select
- value option отправляется
- Опционально prompt, selected, disabled, optgroup
- Не свободный многострочный текст
- Далее: datalist
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху