HTML <datalist> Tag
Тег HTML <datalist> создаёт список предопределённых вариантов для <input>. Узнайте, как использовать тег, с примерами.
Тег <datalist> — один из элементов HTML5. Он предоставляет список предопределённых подсказок для поля <input>, создавая выпадающий список в стиле автодополнения, при этом позволяя пользователю вводить любое значение по своему усмотрению. По мере набора текста браузер фильтрует подсказки и показывает совпадающие.
Именно это отличает <datalist> от меню <select>: <select> ограничивает пользователя фиксированным набором вариантов, тогда как <datalist> лишь предлагает значения — поле остаётся текстовым.
Предопределённые варианты задаются вложенными элементами <option>.
Как связаны три составляющие
Работающий datalist всегда состоит из трёх частей, соединяемых по идентификатору:
- Элемент
<input>с атрибутомlist. - Элемент
<datalist>, чейidсовпадает со значением атрибутаlist. - Один или несколько элементов
<option>внутри<datalist>, содержащих подсказки.
<input list="ice-cream-flavors" />
<datalist id="ice-cream-flavors">
<option value="Chocolate"></option>
<option value="Vanilla"></option>
<option value="Strawberry"></option>
</datalist>Связь устанавливается исключительно по имени: значение list у поля ввода ("ice-cream-flavors") должно точно совпадать с id элемента <datalist>. Если они не совпадают, подсказки не отображаются. Сам <datalist> на странице не виден — видны только его варианты, появляющиеся в выпадающем списке поля ввода.
Дочерние элементы <option>
Каждая подсказка — это отдельный элемент <option>. Его текст можно задать двумя способами:
- Атрибут
value— текст, вставляемый в поле ввода при выборе варианта. - Видимая метка — текст между открывающим и закрывающим тегами, отображаемый пользователю.
Если задан только value, эта же строка и отображается, и вставляется:
<option value="Firefox"></option>Также можно сочетать машинное значение с более понятным описанием через атрибут label (или текст метки), который некоторые браузеры показывают рядом со значением:
<option value="FF" label="Firefox"></option>Здесь в поле ввода попадает FF, а в выпадающем списке отображается более читаемое Firefox. Отрисовка пар значение/метка различается в разных браузерах, поэтому в большинстве случаев проще и надёжнее делать value сразу читаемым для человека.
<datalist> и <select>
Оба элемента отображают список вариантов, но решают разные задачи:
<datalist> | <select> | |
|---|---|---|
| Ввод пользователя | Свободный текст — можно ввести что угодно | Ограничен перечисленными вариантами |
| Роль списка | Подсказки / автодополнение | Единственно допустимые значения |
| Фильтрация при наборе | Да, фильтрует по мере ввода | Ограничена |
| Отправляемое значение | Любое содержимое поля | Всегда один из вариантов |
| Когда использовать | Когда подсказки полезны, но допустимы произвольные значения (строка поиска, домен email, город) | Когда ответ должен быть одним из фиксированных вариантов (код страны, тарифный план) |
Выбирайте <datalist>, когда подсказки помогают, но пользовательское значение по-прежнему допустимо; выбирайте <select>, когда допустимы только предложенные значения.
Синтаксис
Тег <datalist> является парным. Содержимое записывается между открывающим (<datalist>) и закрывающим (</datalist>) тегами.
Пример HTML-тега <datalist>:
Тег HTML <datalist>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="browser">Choose browser</label>
<input list="browsers" id="browser" />
<!-- The list attribute value matches the datalist id -->
<datalist id="browsers">
<option value="Opera"></option>
<option value="Safari"></option>
<option value="Firefox"></option>
<option value="Google Chrome"></option>
<option value="Maxthon"></option>
</datalist>
</body>
</html>Использование настоящего <label> (вместо простого <div>) с атрибутом for, указывающим на id поля ввода, связывает подпись с полем: программы экранного доступа объявляют её, а щелчок по метке переводит фокус в поле ввода.
Пример: выбор страны
Datalist хорошо подходит для полей со многими известными значениями, где всё же нужно разрешить свободный ввод, — например, выбор страны в форме:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="country">Your country</label>
<input list="countries" id="country" name="country" />
<datalist id="countries">
<option value="Argentina"></option>
<option value="Brazil"></option>
<option value="Canada"></option>
<option value="France"></option>
<option value="Germany"></option>
<option value="Japan"></option>
<option value="United States"></option>
</datalist>
<button type="submit">Submit</button>
</form>
</body>
</html>Поддержка браузерами
<datalist> поддерживается всеми современными настольными браузерами. Учитывайте особенности мобильных платформ: поддержка в iOS Safari исторически была неполной или непоследовательной в разных версиях, а некоторые старые или редкие браузеры полностью игнорируют этот элемент. Поскольку поле остаётся обычным текстовым вводом, браузеры, не отображающие подсказки, просто покажут обычное поле — поэтому используйте <datalist> как прогрессивное улучшение, а не как единственный способ сообщить о допустимых значениях.
Атрибуты
Тег <datalist> не имеет собственных атрибутов. Вся его связь с полем ввода осуществляется через id (на который ссылается атрибут list у поля), а подсказки задаются дочерними элементами <option>. Поддерживаются глобальные атрибуты и атрибуты событий.