Как добавить подсказки к полю через datalist и проверить ограничения
Datalist добавляет к полю готовые подсказки, сохраняя свободный ввод. Свяжите список с input, проверьте подставляемое значение и удобство в нужных браузерах.
Что должно получиться
Человек может выбрать предложенный вариант или написать свой. Поле сохраняет понятную подпись, а отправляемое значение соответствует тому, что в нём видно. Если подсказки в конкретной среде неудобны или недоступны, задачу всё равно можно завершить ручным вводом.
Datalist подходит для простого набора рекомендуемых строк. Это не способ автоматически ограничить выбор только перечисленными вариантами. Если допустим ровно один пункт из фиксированного списка, сначала рассмотрите select и соответствующую серверную проверку.
Из чего это складывается
| Часть | Назначение | Что проверить |
|---|---|---|
| input | Хранит введённое значение | Имеет подпись и нужное имя для отправки |
| list | Связывает поле с подсказками | Совпадает с id нужного datalist |
| datalist | Содержит варианты | Идентификатор не повторяется случайно |
| option value | Определяет подставляемую строку | Значение понятно человеку |
| Проверка ввода | Определяет допустимость данных | Не полагается на наличие подсказки |
| Целевая среда | Определяет представление списка | Проверены телефон и вспомогательные технологии |
Что вводит человек
Подсказки datalist задаёт сайт. Сохранённые имя, телефон или адрес браузер может предлагать по другим правилам автозаполнения. Не смешивайте эти источники в объяснении поля: список направлений работы и сохранённый профиль человека решают разные задачи.
При выборе варианта в поле попадает его value. Дополнительная подпись варианта и текст могут показываться по-разному в разных браузерах. Для простого списка используйте понятные значения и не рассчитывайте, что сложное пояснение будет везде отображено одинаково.
Как это сделать по шагам
- Определите, допустим ли свободный ввод. Если разрешены только фиксированные варианты, выберите подходящий элемент управления до подготовки разметки.
- Составьте небольшой полезный список строк. Уберите дубли и варианты, смысл которых невозможно понять без отдельного пояснения.
- Добавьте текстовое поле с видимой подписью. Назначьте ему id для связи с label и name для обработки формы.
- Создайте datalist с уникальным id. В атрибуте list у input укажите именно этот идентификатор.
- Добавьте option с понятными value. Проверьте выбор каждого варианта и ручной ввод строки, которой в списке нет.
- Отправьте тестовую форму и сравните фактическое значение с ожидаемым. Проверьте исправление выбранной строки перед отправкой.
- Повторите проверку на телефоне, с клавиатуры, увеличением и нужными вспомогательными технологиями. Если список не подходит целевой среде, пересмотрите решение.
Пример простого списка
Учебная разметка: <label for='specialty'>Направление работы</label> <input id='specialty' name='specialty' list='specialties'> <datalist id='specialties'><option value='Вёрстка'></option><option value='Тестирование'></option></datalist>.
Здесь for='specialty' относится к id поля, а list='specialties' — к id списка. Это две разные связи. Если перепутать идентификаторы, подпись может перестать относиться к полю либо варианты не появятся. Сам datalist не является отдельным полем отправки: значение хранится в связанном input.
Пример не запрещает человеку написать другое направление. Если приложение должно принимать произвольную строку, обработчик проверяет её по правилам свободного ввода. Если требуется только существующая запись справочника, спроектируйте выбор и передачу её идентификатора отдельно.
Когда лучше выбрать другой элемент
Список подсказок неудобен, если нужно показывать изображения, много пояснений или сложные группы. Не пытайтесь превратить нативные варианты в карточки с собственным оформлением. Возможности их стилизации ограничены.
Для выбора из строго определённых вариантов рассмотрите select. Для сложного компонента с поиском и подгрузкой данных потребуется отдельная реализация, включая управление с клавиатуры и объявление состояний. Самодельное выпадающее меню не становится доступным только благодаря внешнему сходству с системным списком.
Проверка доступности
У datalist есть ограничения в отдельных сочетаниях браузеров и вспомогательных технологий. Представление списка также может плохо подстраиваться под увеличение текста и настройки контрастности. Проверьте именно ту среду, для которой делаете форму, вместо обещания одинакового поведения повсюду.
Человек должен понимать назначение поля и возможность свободного ввода, даже если не воспользовался подсказками. Проверьте переход к полю, вызов и закрытие вариантов, выбор, исправление и продолжение формы. Не считайте успешное нажатие мышью полной проверкой.
Частые ошибки
Считать подсказки ограничением допустимых значений
Отсутствие строки среди option само по себе не делает её недопустимой. Правила проверки определяются отдельно. Объясните их до отправки и повторите на сервере.
Передавать одно значение, показывая другое
Если value — непонятный технический код, он может оказаться в поле после выбора. Для простой строковой подсказки используйте понятное значение. Если нужны код и название как отдельные сущности, выберите соответствующую модель данных и интерфейса.
Загружать в список всё содержимое большого справочника
Огромный набор усложняет поиск нужного варианта и работу страницы. Выбирайте данные по задаче. Не включайте в общий список закрытые сведения, которые не должны быть доступны каждому посетителю формы.
Как проверить
- Подпись связана с input, а list связан с нужным datalist.
- Все идентификаторы уникальны в пределах документа.
- Выбранный вариант подставляет ожидаемую строку.
- Ручной ввод и исправление значения работают.
- Отправляемые данные совпадают с проверенным содержимым поля.
- Подсказки не выдаются за серверную проверку.
- В нужных средах сохраняется возможность понять поле и завершить форму.
Сравните этот механизм с автозаполнением браузера, проверьте подпись поля и итог отправки. Помощь с формой можно найти в разделе «Разработка».
Вопросы и ответы
Datalist запрещает ввод своего варианта?
Нет. Он предлагает значения. Допустимость введённого текста определяется отдельными правилами проверки.
Чем datalist отличается от select?
Datalist связывает подсказки с полем ввода, а select предназначен для выбора из вариантов. Выбор элемента зависит от того, разрешены ли собственные строки.
Почему варианты не появились?
Проверьте соответствие list и id, структуру option, тип поля и поведение целевого браузера. Поле должно оставаться пригодным для ручного ввода.
Что попадает в input после выбора?
Значение value выбранного option. Дополнительные подписи могут отображаться иначе, поэтому проверяйте итог в самом поле.
Можно ли оформить варианты как карточки?
Возможности нативного списка ограничены. Для сложного представления нужен другой компонент с отдельно проверенной доступностью.
Нужно ли проверять отправку формы?
Да. Удобный выбор ещё не подтверждает правильную обработку данных. Сравните введённую строку, результат проверки и итог сохранения.