Что делает тег

Тег <datalist> используется для создания списка опций для элемента ввода. Пользователь может выбрать опцию из списка вместо того, чтобы вводить её вручную.

Синтаксис тега <datalist>

<label for="input_element">Выберите опцию:</label>
<input list="options" id="input_element" name="input_name">>
<datalist id="options">>
  <option value="Вариант 1">
  <option value="Вариант 2">
  <option value="Вариант 3">
</datalist>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <datalist> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Простой список опций:

<label for="fruits">Выберите фрукт:</label>
<input list="fruit_options" id="fruits" name="fruit_name">>
<datalist id="fruit_options">>
  <option value="Яблоко">
  <option value="Банан">
  <option value="Апельсин">
</datalist>

Список опций с описанием:

<label for="countries">Выберите страну:</label>
<input list="country_options" id="countries" name="country_name">>
<datalist id="country_options">>
  <option value="GER">Германия</option>
  <option value="CHIN">Китай</option>
  <option value="MEX">Мексика</option>
</datalist>

Динамический список опций:

<label for="cities">Выберите город:</label>
<input list="city_options" id="cities" name="city_name">>
<datalist id="city_options">>
  <option value="Москва">
  <option value="Санкт-Петербург">
  <option value="Казань">
</datalist>

<button onclick="addCity()">Добавить город</button>

<script>
function addCity() {
  var cityInput = document.getElementById("cities");
  var newOption = document.createElement("option");
  newOption.value = "Новый город";
  cityInput.appendChild(newOption);
}
</script>

Для чего использовать тег <datalist>

  • Для фильтрации и предложения вариантов. Используйте <datalist> для предложения вариантов на основе пользовательского ввода и динамически обновляйте список по мере ввода пользователем.
  • Для автозаполнения поисковых запросов. Используйте тег для создания перечня предлагаемых поисковых запросов по мере того, как пользователь набирает текст в строке поиска.
  • Для перечня доступных опций. Используйте <datalist>, чтобы создать список доступных вариантов для ввода в форму.
  • Для списка ранее использованных входов. Используйте тег, чтобы показать список ранее использованных данных — например, недавно вводимых адресов электронной почты.
  • Для вывода подсказок при неполном вводе. Например, показывайте список логинов или адресов электронной почты на основе того, что пользователь уже набрал.
  • Для списка доступных категорий или тегов. Используйте <datalist>, чтобы сформировать список доступных категорий или тегов в блоге.

Атрибуты тега <datalist>

У тега нет специфических атрибутов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

  • Тег поддерживает только текстовые опции. Его нельзя использовать для опций с изображениями или другими медиа.
  • У <datalist> нет встроенных функций для фильтрации или сортировки опций.
  • Тег плохо поддерживается в старых браузерах. Поэтому для пользователей, использующих старые браузеры, необходимо предусмотреть запасной вариант.

Нюансы

  • Если пользователь вводит значение, которого нет в списке опций, оно всё равно будет принято и отправлено вместе с данными формы.
  • Если элемент ввода помечен как обязательный, пользователь не сможет отправить форму, если не выберет вариант из списка.
  • Если в списке вариантов одно и то же значение встречается несколько раз, каждое из них будет отображаться как отдельный вариант.

Поддержка браузерами

Тег поддерживается не всеми браузерами.
Актуальная информация — на сaniuse.

Альтернативные теги

Прямых альтернатив тегу <datalist> не существует, но схожая функциональность может быть достигнута с помощью JavaScript или сторонних библиотек, таких как jQuery UI или Select2.

Чем заменить тег

Если тег <datalist> не может быть использован или плохо поддерживается, можно попробовать другие варианты.

  • Использовать <select> со списком опций.
  • Использовать обычный текстовый ввод и реализовать функции фильтрации и предложения с помощью JavaScript.
  • Использовать сторонние библиотеки или фреймворки, предоставляющего аналогичную функциональность, например, jQuery UI или Select2.

Актуальность

Тег <datalist> не устарел, можете использовать его в веб-разработке.


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<ul>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<ins>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023