Datalist в HTML
Ранее select заставлял выбирать из закрытого списка. Datalist — другая задача: вы печатаете в обычный input, браузер предлагает. Можно взять подсказку или написать своё.
Зачем нужен datalist
Поиск, цвет и город часто нуждаются в частых ответах без запрета редких. select отвергает вне списка; пустой input не подсказывает. datalist заполняет разрыв: подсказки при свободном вводе.
Прямой ответ
1) datalist с option value. 2) list на input = id. 3) label и name на input — datalist не отправляет. 4) Подсказка или свой текст OK. 5) Используйте select, когда значение должно быть только из списка.
📊 Datalist pieces beginners use
| Piece | Role | Beginner tip |
|---|---|---|
| datalist | Suggestion container | Hidden list of hints; not a visible form control alone |
| option (inside datalist) | One suggestion | Prefer value= for the hinted string |
| list (on input) | Points to datalist | Must equal the datalist’s id |
| id (on datalist) | Hook for list= | Unique on the page |
| input | Typed field that submits | Owns name=; suggestions are optional help |
| label | Accessible name | Still required — list suggestions are not a label |
| name (on input) | Submit key | What posts is whatever is in the input |
Демо подсказок браузера
Поле Browser от Firefox до Safari. Набрать Brave можно — список не блокирует.
<label for="browser">Browser</label>
<input id="browser" name="browser" list="browsers" placeholder="Type or choose">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Edge">
<option value="Safari">
</datalist>
Читаем демо браузера
- Отправляет input, не datalist
- list должен совпадать с id
- Каждый option value — подсказка
- name ключует значение input
- label именует поле
- В отличие от select не ограничены четырьмя именами
Подсказки города с datalist
Второй фрагмент: предлагает города, но можно ввести деревню. Сравните с закрытым select ранее.
<form action="/ship" method="post">
<label for="city">City</label>
<input id="city" name="city" list="cities" placeholder="Start typing a city" autocomplete="off">
<datalist id="cities">
<option value="Tehran">
<option value="Isfahan">
<option value="Shiraz">
</datalist>
<button type="submit">Continue</button>
</form>
Читаем демо города
- Тот же шаблон label и name
- list/id связывает подсказки
- Submit = текст input
- autocomplete=off по желанию
- дальше: более широкая accessibility
Выбор datalist vs select vs input
- Только фиксированный набор: select
- Подсказки + свободный текст: input + list + datalist
- Без подсказок: простой input
- datalist не заменяет label или name
- Не вкладывайте datalist в input; свяжите через id
Практика — связать подсказки
- Пятый option Opera
- Нарочно сломайте id и исправьте
- Введите своё имя
- Добавьте Mashhad к городам
- Перепишите как select; одно предложение о разнице
- Фраза: datalist предлагает; select ограничивает
- Именование в следующем уроке accessibility
Частые ошибки
- list и id не совпадают
- Ожидание отказа свободного ввода
- Забыли label
- Забыли name на input
- name на datalist
- пустой option без value
- Мышление только-select на свободном поле
Итог
- datalist + option value = подсказки для input
- Свяжите list и id
- Ввод вне списка разрешён
- label и name на input
- select для закрытого выбора
- Далее: accessibility
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху