УРОК 77 ИЗ 120

Создайте: подсказки через datalist

Свяжите input со списком подсказок datalist.

Официальный источникWHATWG HTML — datalistПроверено: 2026-08-26
ШАГ 1 · ИЗУЧИТЕ

Как это работает

Свяжите input со списком подсказок datalist. Семантическая структура должна описывать смысл, а не внешний вид.

Правильный пример
<form><label for="city">Населённый пункт</label><input id="city" name="city" list="cities"><datalist id="cities"><option value="Кишинёв"><option value="Бельцы"><option value="Кагул"></datalist></form>

datalist хранит готовые подсказки, но пользователь может ввести другое значение. Атрибут list input должен совпадать с id списка, а реальные подсказки имеют непустое value.

Частая ошибка
<form><input list="cities"><datalist><option value="Кишинёв"></datalist></form>

У input нет label, id или name, у datalist нет id «cities», а одной option недостаточно для требуемого набора подсказок.

ШАГ 2 · ПРИМЕНИТЕ

Ваше задание

Дополните пример. Свяжите input со списком подсказок datalist.

ШАГ 3 · СОЗДАЙТЕ

Напишите и посмотрите результат

index.htmlHTML
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ

Что должно пройти

0%не проверено
  • У input есть id, name и ссылка на datalist cities.
  • Datalist предлагает минимум три разные подсказки.
  • У input с подсказками есть label.
Объясните логику решения

Добавьте input label, id и name, задайте datalist id="cities" и создайте минимум три option с разными значениями.