Список вариантов <datalist>

Тег <datalist> задает список вариантов, которые можно выбрать при вводе информации в текстовое поле.

Этот список появляется при получении полем ввода фокуса (Internet Explorer 10 и Opera), или при начале набора текста (Firefox и Chrome).

Список вариантов <datalist> задается разработчиком и отображается всегда в одном и том же виде, независимо от данных, введенных пользователем ранее. Пользователь может проигнорировать список с вариантами и просто ввести любое значение.

Атрибут тега <datalist>

id

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

Для тега <datalist> также доступны другие общие атрибуты и атрибуты обработки событий.

Пример

<label for="fruit">Любимый фрукт:</label>
<input type="text" name="fruit" id="fruit" list="fruit_list">
<datalist id="fruit_list">
    <option value="Абрикос">Абрикос</option>
    <option value="Апельсин">Апельсин</option>
    <option value="Банан">Банан</option>
    <option value="Груша">Груша</option>
    <option value="Мандарин">Мандарин</option>
    <option value="Манго">Манго</option>
</datalist>