Справочник · HTML

datalist: подсказки для поля, не жёсткий список

datalist предлагает варианты, но человек может ввести свой текст.

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

Список связывают с полем через list и id. option задаёт подсказку. Это не select: в select можно выбрать только готовое. Подсказки не заменяют label. Не клади в datalist огромный справочник на тысячи строк без нужды. Для строгого выбора города из пяти пунктов обычный select честнее.

<label>Тема
  <input name="topic" list="topics">
</label>
<datalist id="topics">
  <option value="HTML">
  <option value="CSS">
</datalist>

Когда использовать

Поиск по частым темам, где можно ввести и новую. Короткий обязательный выбор оставь select.

Частые ошибки

• Ждали запрет на свой текст, а поле его принимает.
• id списка и list у поля не совпали.
• Нет подписи, только выпадающие подсказки.