HTML тег `<datalist>`

Значение и применение

Элемент <datalist> определяет список предопределенных вариантов для ввода. Пользователи увидят раскрывающийся список предопределенных вариантов, как входных данных. Варианты списка можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и доступен при использовании с элементом <input>, при этом, атрибут list тега <input>, должен соответствовать идентификатору (глобальный атрибут id) элемента <datalist>.

Тег <option> применяется как вложенный элемент списка предопределенных вариантов для ввода и определяет пункты списка (параметры для выбора).

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

Спецификация: multipage

С ограничениями: Firefox Android.

Отдельные значения (4) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.datalist
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`datalist`	✓20	✓12	✓4	✓9.5	✓12.1	✓33	◐79 Версия 79 выпущена в 2020 г. — Частичная поддержка Примечание MDN (англ.) The dropdown menu containing available options does not appear. See bug 1535985. Версия 4 выпущена в 2011 г. — Удалено в 79	✓20	✓12.2	✓2.0	✓4.4.3	✓12.2
Support with <input type="color">	✓20	✓14	×	✓12	✓12.1	✓33	×	✓20	✓12.2	✓2.0	✓4.4.3	✓12.2
Support with <input type="date">	✓20	✓12	×	✓11	✓14.1	✓33	×	✓20	✓14.5	✓2.0	✓4.4.3	✓14.5
Support with <input type="email">	✓22	✓12	✓4	✓≤12.1	✓12.1	✓33	✓4	✓20	✓12.2	✓2.0	✓4.4.3	✓12.2
Support with <input type="number">	✓22	✓12	✓4	✓≤12.1	✓12.1	✓33	✓4	✓20	✓12.2	✓2.0	✓4.4.3	✓12.2
Support with <input type="range">	✓20	✓12	✓110	✓11	✓12.1	✓57	×	✓20	✓12.2	✓7.0	✓57	✓12.2
Support with <input type="search">	✓22	✓12	✓4	✓≤12.1	✓12.1	✓33	✓4	✓20	✓12.2	✓2.0	✓4.4.3	✓12.2
Support with <input type="tel">	✓22	✓12	✓4	✓≤12.1	✓12.1	✓33	✓4	✓20	✓12.2	✓2.0	✓4.4.3	✓12.2
Support with <input type="text">	✓20	✓12	✓4	✓9.5	✓12.1	✓33	✓4	✓20	✓12.2	✓2.0	✓4.4.3	✓12.2
Support with <input type="time">	✓20	✓12	×	✓10	✓14.1	✓33	×	✓20	✓12.2	✓2.0	✓4.4.3	✓12.2
Support with <input type="url">	✓22	✓12	✓4	✓≤12.1	✓12.1	✓33	✓4	✓20	✓12.2	✓2.0	✓4.4.3	✓12.2
Ещё 6 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Примеры, попробуйте сами

Подсказки для ввода

Начните вводить название. Можно выбрать подсказку или ввести своё значение.

index.html

HTML

<label for="city">Город</label><input id="city" list="cities" /><datalist id="cities">
  <option value="Москва"></option>
  <option value="Казань"></option>
  <option value="Самара"></option>
</datalist>

Значение CSS по умолчанию

CSS

datalist {
display: none;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML тег <datalist>