<datalist> ^HTML

Тег <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 value="Текст2">
    </datalist>

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

WAI ARIA

Значение role по умолчанию: listbox

Атрибуты

Список, создаваемый элементом <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>

В начало

<datalist> HTML