Перейти к содержанию

<datalist>

Тег <datalist> (от англ. list of data - список данных) создаёт список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса или при наборе текста.

Формы

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

Can I Use datalist? Data on support for the datalist feature across the major browsers from caniuse.com.

Синтаксис

<input list="<идентификатор>" />
<datalist id="<идентификатор>">
  <option value="Текст1"></option>
  <option value="Текст2"></option>
</datalist>

Закрывающий тег обязателен.

Атрибуты

Список, создаваемый элементом <datalist>, связывается с текстовым полем посредством атрибута id. Его значение должно совпадать со значением атрибута list элемента <input>.

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

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>datalist</title>
  </head>
  <body>
    <p>Выберите любимого персонажа:</p>
    <p>
      <input list="character" />
      <datalist id="character">
        <option value="Чебурашка"></option>
        <option value="Крокодил Гена"></option>
        <option value="Шапокляк"></option>
      </datalist>
    </p>
  </body>
</html>

Ссылки