Тег <datalist>: подсказки без запрета свободного ввода

Назначение

Datalist предлагает варианты для связанного поля input. Пользователь может выбрать подсказку или ввести другое значение, поэтому такой список нельзя считать проверкой допустимых ответов.

Как это работает

Атрибут list у input ссылается на id списка. Внутри datalist элементы option задают предложенные значения. Постоянная подпись label объясняет назначение поля независимо от того, открылось ли меню подсказок.

Пример

<label for="topic">Тема заметки</label>
<input id="topic" name="topic" list="topics">
<datalist id="topics"><option value="HTML"><option value="CSS"><option value="JavaScript"></datalist>
<p>Можно выбрать подсказку или написать свою тему.</p>

Что должно получиться

В поддерживающем браузере при взаимодействии с полем появляются предложенные темы. Введённое вручную слово тоже остаётся значением. Внешний вид и способ открытия списка зависят от браузера и типа поля.

Граница применения и частая ошибка

Если разрешён только фиксированный набор, рассмотрите select и серверную проверку. Подсказки datalist имеют ограничения масштабирования и доступности в некоторых сочетаниях браузеров и экранных дикторов; нельзя обещать одинаковое поведение всем посетителям.

Самостоятельная проверка

Введите часть известной темы, затем совершенно новое слово. Проверьте управление клавиатурой и увеличение масштаба. Убедитесь, что без появления подсказок человек всё равно понимает, какие данные от него ожидаются.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.

Связанные материалы

• Поля ввода
• Варианты выбора
• Семантика документа