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

<datalist>

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

Демо

Формы

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

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

Синтаксис

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

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

Атрибуты

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!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>

Ссылки

Комментарии