Тег datalist (от английского data list, «список данных») хранит варианты подсказок для поля ввода. Поле связывают со списком атрибутом list, а в самом datalist записывают теги option с вариантами. Сам элемент на странице не виден, подсказки показывает браузер при фокусе или вводе. Закрывающий </datalist> обязателен.
Для выбора только из заданных вариантов подходит тег тег select, а datalist лишь подсказывает: пользователь может ввести любое значение. Основы разобраны в уроке про связь datalist с полем, а поле создаёт тег input.
<input name="city" list="cities">
<datalist id="cities">
<option value="Минск"></option>
<option value="Киев"></option>
<option value="Рига"></option>
</datalist>В этой статье
- Тег datalist в HTML: что это и для чего нужен
- Связь datalist с полем: list и id
- Варианты в datalist: option, value и label
- Какие поля работают с datalist: type и list
- Datalist лишь подсказывает: проверка и отправка
- Что записывают внутри datalist
- Тег datalist и JavaScript: list и options
- Тег datalist и CSS: что видно на странице
- Доступность datalist: роль поля со списком
- Атрибуты тега datalist
- Вопросы про тег datalist: общий список и проверка значения
- Частые ошибки с тегом datalist
Тег datalist в HTML: что это и для чего нужен
Поле со списком подсказок удобно, когда у ответа есть частые варианты, но допустимы и другие: город, марка, домен. У тега нет собственных атрибутов, только глобальные. Браузер открывает подсказки сам, а вид окна у разных браузеров свой. Вычисленный display у datalist равен none, поэтому на странице он не занимает места.
<input name="city" list="cities">
<datalist id="cities">
<option value="Минск"></option>
</datalist>Пример: поле без datalist и с ним
Выберите запись: под результатом связь поля со списком.
Связь datalist с полем: list и id
Связь задают два одинаковых значения: list у поля и id у datalist. Значения сравниваются с учётом регистра, поэтому list="Cities" не найдёт id="cities". Связь возможна только с datalist: у другого тега свойство input.list даёт null. Порядок в разметке не важен, список может находиться и до поля. При двух элементах с одним id берётся первый в документе, а проверка HTML сообщает об ошибке.
<datalist id="cities">
<option value="Минск"></option>
</datalist>
<input list="cities">Пример: когда связь есть и когда нет
Выберите запись: под результатом свойство list и первый вариант.
Варианты в datalist: option, value и label
Варианты задают с помощью тега option. Значение берётся из value, а без него из текста option. Атрибут label и текст служат пояснением, и как их показать вместе со значением, решает браузер. По спецификации подсказкой становится вариант без disabled и с непустым value, но свойство options считает все варианты подряд. Для пустого option с атрибутом value проверка HTML не сообщает об ошибке, а label="" считает ошибкой.
<datalist id="cities">
<option value="RIX">Рига</option>
<option value="TLL" label="Таллин"></option>
</datalist>Пример: value, label и текст у option
Выберите запись: под результатом свойства первого option.
Какие поля работают с datalist: type и list
Список подключается к полям типов text, search, url, tel, email, number, range, color, date, month, week, time и datetime-local. У checkbox, radio, password, file, hidden и кнопок свойство input.list даёт null, а проверка HTML сообщает об ошибке. У range варианты рисуют деления на шкале: у option с disabled деления нет, а значение к делению не прилипает. Для color браузер может показать заданные цвета в окне выбора.
<input type="range" min="0" max="100" list="marks">
<datalist id="marks">
<option value="0"></option>
<option value="50"></option>
<option value="100"></option>
</datalist>Пример: у каких типов список подключается
Выберите тип: под результатом свойство list и пояснение.
Datalist лишь подсказывает: проверка и отправка
Список только подсказывает: поле принимает любое значение, которое проходит обычную проверку, даже если его нет среди вариантов. Сам браузер значение со списком не сравнивает. При проверке скриптом (includes) сравнение точное, регистр учитывается. В данные формы попадает значение поля, а сам datalist и его option не отправляются. Если нужен выбор строго из списка, используют тег select или проверяют значение скриптом.
<form>
<input name="city" list="cities" required>
<datalist id="cities">
<option value="Киев"></option>
</datalist>
</form>Пример: значение из списка и вне списка
Выберите запись: под результатом проверка и данные формы.
Что записывают внутри datalist
Внутри datalist записывают теги option либо строчное содержимое. Текст рядом с option не виден и проверкой HTML не отмечается. Блочный div, hr и тег optgroup внутри проверка HTML считает ошибкой, а select пропускает. Свойство options считает такие варианты, даже когда они вложены в другой тег, но надёжнее записывать option прямыми дочерними элементами.
<datalist id="cities">
Города
<option value="Минск"></option>
</datalist>Пример: что допустимо внутри datalist
Выберите запись: под результатом дети datalist и число вариантов.
Тег datalist и JavaScript: list и options
Свойство input.list возвращает datalist или null и доступно только для чтения: присваивание ничего не меняет. Чтобы связать поле с другим списком, меняют атрибут через setAttribute. Свойство options содержит все варианты, включая отключённые и с пустым value. Варианты наполняют из массива через replaceChildren и new Option, а список, заполненный один раз, работает у всех связанных полей.
const input = document.querySelector("input");
const cities = ["Минск", "Киев", "Рига"];
input.list.replaceChildren(
...cities.map(city => new Option(city))
);Пример: list, options и наполнение
Выберите запись: под результатом ответ скрипта.
Тег datalist и CSS: что видно на странице
По умолчанию datalist скрыт: у него display: none и нулевые размеры. Если задать display: block, текст его option выводится строками на странице. Цвет, фон и шрифт тогда действуют только на этот блок, а окном подсказок управляет браузер, и оформить его почти нельзя. Если нужен свой вид списка, подсказки делают отдельным блоком с помощью JavaScript.
datalist {
display: block;
}Пример: datalist с display и без
Выберите запись: под результатом display и размер блока.
Доступность datalist: роль поля со списком
Поле со list получает роль combobox, а поле без списка остаётся textbox. Название задаёт обычный label, список его не заменяет. У полей number и range роли остаются spinbutton и slider. Окно подсказок рисует браузер, и поддержка в программах чтения может различаться, поэтому важные варианты дублируют в тексте рядом с полем. Роль role у самого datalist проверка HTML не допускает.
<label>Город
<input name="city" list="cities">
</label>Пример: роль поля со списком
Выберите запись: под результатом роль поля для программы чтения с экрана.
Атрибуты тега datalist
У datalist нет собственных атрибутов, только глобальные. Связь с полем задают id у списка и list у поля. Часть атрибутов знакома по другим тегам, но у datalist они не допускаются.
| Атрибут | Статус | Что делает | Пример записи |
|---|---|---|---|
id | глобальный | Идентификатор: значение указывают в list у поля | id="cities" |
class | глобальный | Класс для оформления, если список выведен через display | class="hint" |
style | глобальный | Встроенные стили | style="display: block" |
title | глобальный | Всплывающая подсказка | title="Города" |
hidden | глобальный | Скрывает элемент, но у списка он и так скрыт | hidden |
list | не существует | Пишется у поля, а не у datalist | list="cities" |
name | не существует | Список не отправляется, названия у него нет | name="cities" |
role | не допускается | Роль задаёт сам браузер | role="listbox" |
Вопросы про тег datalist: общий список и проверка значения
Список подсказок удобно сделать общим для нескольких полей, а значение из него иногда проверяют вручную.
Можно ли использовать один datalist для нескольких полей?
Да. У полей записывают одинаковый list, и все они берут варианты из одного datalist. Вариант, добавленный в список один раз, появится у всех полей.
<input name="from" list="cities">
<input name="to" list="cities">
<datalist id="cities">
<option value="Минск"></option>
</datalist>Пример: два поля и один список
Выберите запись: под результатом список каждого поля.
Как проверить, что введённое значение есть в списке?
Берут значения всех вариантов через input.list.options и ищут среди них значение поля методом includes. Сравнение точное, поэтому «киев» и «Киев» считаются разными значениями.
const values = Array.from(input.list.options, o => o.value);
const found = values.includes(input.value);Пример: поиск значения среди вариантов
Выберите запись: под результатом найдено ли значение.
Частые ошибки с тегом datalist
Ошибки с datalist чаще всего связаны с привязкой списка и ожиданиями от подсказок.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Разный регистр у list и id | Связи нет, input.list даёт null | Записать значения одинаково |
list указывает не на datalist | Свойство list даёт null, проверка HTML сообщает об ошибке | Записать id у самого datalist |
Два datalist с одним id | Берётся первый, проверка HTML сообщает об ошибке | Сделать id уникальными |
Расчёт на то, что datalist запретит другие значения | Любое значение проходит проверку, список лишь подсказывает | Использовать select или проверку скриптом |
list у checkbox, password или file | Список не подключается, проверка HTML сообщает об ошибке | Выбрать тип, с которым список подключается |
div, hr или optgroup внутри | Проверка HTML сообщает об ошибке | Записывать option прямыми дочерними элементами |
name, role или list у datalist | Атрибуты не допускаются, проверка HTML сообщает об ошибке | Убрать, а list писать у поля |
Пустой value или disabled у варианта | По спецификации такой вариант подсказкой не станет | Задать непустой value и убрать disabled |
| Ждать, что CSS оформит окно подсказок | Окном управляет браузер, стили действуют только на блок при display: block | Сделать свой список подсказок скриптом |
