Тег <datalist>

Описание

Тег <datalist> создает список предопределенных вариантов для элемента <input>, предоставляя пользователю автодополнение при вводе. Варианты отображаются как выпадающий список.

Простое автодополнение:
<label for="browser">Выберите браузер:</label> <input list="browsers" id="browser"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> </datalist>
Автодополнение с группировкой:
<input list="food" placeholder="Выберите продукт"> <datalist id="food"> <optgroup label="Фрукты"> <option value="Яблоко"> <option value="Банан"> </optgroup> <optgroup label="Овощи"> <option value="Морковь"> <option value="Картофель"> </optgroup> </datalist>
Динамическое заполнение через JavaScript:
<input list="cities" id="city-input"> <datalist id="cities"></datalist> <script> const cities = ['Москва', 'Санкт-Петербург', 'Новосибирск']; const datalist = document.getElementById('cities'); cities.forEach(city => { const option = document.createElement('option'); option.value = city; datalist.appendChild(option); }); </script>

Ключевые особенности:

  • Связывается с <input> через атрибут list
  • Позволяет как выбирать из списка, так и вводить произвольное значение
  • Поддерживает группировку через <optgroup>
  • Может заполняться динамически через JavaScript
  • Не заменяет <select> (пользователь может ввести свое значение)

Советы по использованию:

  • Используйте для полей с предсказуемыми вариантами (города, страны)
  • Добавляйте наиболее популярные варианты первыми
  • Для больших списков (100+ элементов) используйте динамическую загрузку
  • Сочетайте с input типа search для лучшей семантики

Тег <datalist> значительно улучшает пользовательский опыт в формах, экономя время на ввод часто используемых значений.

Атрибуты

accesskey Определяет горячую клавишу для активации/фокусировки элемента
class Задает один или несколько классов CSS для стилизации элемента
contenteditable Указывает, может ли пользователь редактировать содержимое элемента
data-* Используется для хранения пользовательских данных в элементах
dir Определяет направление текста: слева направо (ltr) или справа налево (rtl)
hidden Скрывает элемент, делая его невидимым и недоступным для пользователя
id Уникальный идентификатор элемента в документе
lang Определяет язык содержимого элемента
spellcheck Указывает, должна ли проверяться орфография в содержимом элемента
style Позволяет задавать CSS-стили непосредственно в атрибуте элемента
tabindex Определяет порядок перехода между элементами при нажатии Tab
title Задает всплывающую подсказку при наведении на элемент
translate Указывает, должен ли переводиться текст внутри элемента

Поддержка браузерами
10.0 20.0 9.5 4.0 12.1