🤔 Что такое элемент datalist в html 5?

<datalist> — это тег в HTML5, который позволяет создать выпадающий список вариантов для <input>. Он помогает пользователям быстрее вводить данные, предлагая автодополнение, но в отличие от <select>, список остаётся необязательным — пользователь может ввести своё значение.

🚩Как работает `<datalist>`?

Пример: автодополнение города

<label for="city">Выберите город:</label>
<input list="cities" id="city" name="city">

<datalist id="cities">
  <option value="Москва">
  <option value="Санкт-Петербург">
  <option value="Казань">
  <option value="Новосибирск">
</datalist>

🚩Можно ли использовать с `type="number"`?

Нет, <datalist> не работает с type="number".
Но с type="text" и type="email" — работает отлично.

<input type="number" list="numbers">
<datalist id="numbers">
  <option value="10">
  <option value="20">
</datalist>

Рабочий вариант

<input type="text" list="numbers">

Ставь 👍 и забирай 📚 Базу знаний