<datalist>
- 25 января 2023
Что делает тег
Тег <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.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Глобальные атрибуты HTML
Список основных атрибутов, которые подойдут ко всему.
- 29 марта 2023
Как добавить раздел на страницу. Тег <div>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Список описаний. Тег <dl>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Пункт выпадающего списка. Тег <option>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023