Как настроить autocomplete в полях формы и проверить автозаполнение

Autocomplete подсказывает браузеру назначение полей формы. Укажите подходящие значения, разделите группы данных и проверьте заполнение без ручного набора.

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

Браузер предлагает сохранённое имя там, где нужно имя, а электронную почту — в поле почты. Если в форме два адреса, их значения не смешиваются. После подстановки данные видны, доступны для исправления и попадают в отправку так же, как введённые вручную.

Атрибут autocomplete помогает браузеру понять назначение поля, но не заставляет его подставить данные. У человека может не быть сохранённого профиля, а автозаполнение может быть выключено. Форма должна оставаться удобной и при полностью ручном вводе.

Из чего это складывается

Назначение поля и его имя

Не путайте HTML-атрибут name со значением autocomplete='name'. Первый задаёт техническое имя отправляемого поля, второе сообщает, что ожидается полное имя человека. Внутреннее имя вроде contact_name само по себе не заменяет явного указания назначения.

Тип email также не заменяет autocomplete='email'. Эти атрибуты решают разные части задачи. Подпись нужна в любом случае: подставленное значение не объясняет, для чего оно используется, а временная подсказка внутри пустого поля исчезает при заполнении.

Как это сделать по шагам

1. Составьте список полей и опишите, чьи данные ожидаются в каждом. Отдельно отметьте повторяющиеся адреса, контакты и формы входа.
2. Выберите стандартное значение autocomplete по смыслу поля. Не придумывайте собственные слова вместо предусмотренных токенов.
3. Проверьте type, name, id и связь с label. У формы должны быть понятный способ отправки и корректная обработка значений.
4. Для повторяющихся наборов добавьте нужную группировку. Сохраняйте порядок токенов и одинаковое имя секции у связанных полей.
5. Откройте форму в тестовом профиле браузера с вымышленными сохранёнными данными. Подставьте набор целиком и проверьте каждое поле.
6. Измените одно из подставленных значений, вызовите предусмотренную ошибку и повторите отправку. Убедитесь, что приложение использует актуальные значения.
7. Повторите проверку без сохранённого профиля и на другом устройстве. Зафиксируйте различия браузеров и сохраните рабочий ручной ввод.

Пример для электронной почты

Простой фрагмент поля: <label for='contact-email'>Электронная почта</label> <input id='contact-email' name='email' type='email' autocomplete='email'>. Поле размещают внутри своей формы. Связь for и id сохраняют, а техническое имя name согласуют с обработчиком.

Этот пример описывает назначение поля и его подпись. Он не задаёт правила сервера, подтверждение адреса или текст результата отправки. Проверяйте эти части отдельно. Подстановка из профиля не доказывает, что адрес принадлежит отправителю.

Два адреса в одной форме

Если нужны адрес доставки и платёжный адрес, назначение можно различить сочетаниями shipping postal-code и billing postal-code. Когда есть несколько отдельных адресов одного назначения, используйте именованные секции, например section-first shipping postal-code и section-second shipping postal-code.

Токен section-* идёт первым. Поля одного набора получают одинаковое имя секции, а последняя часть описывает конкретные данные: почтовый индекс, улицу или другую предусмотренную часть адреса. Не назначайте двум разным получателям одну секцию просто потому, что их блоки выглядят одинаково.

Вход и создание учётной записи

Для существующего пароля используют current-password, для нового — new-password. Эти значения помогают менеджеру паролей различить сценарии. Не выдавайте создание пароля за повторный ввод старого и не используйте случайные имена полей как способ борьбы с автозаполнением.

Значение off не гарантирует отключение менеджера паролей. Браузеры могут сохранять и подставлять данные входа по своим правилам. Защиту учётной записи обеспечивают соответствующие механизмы приложения, а не попытка скрыть назначение поля.

Частые ошибки

Следить только за нажатиями клавиш

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

Стирать подставленные значения при ошибке

После неудачной отправки сохраните допустимые данные и объясните, что нужно исправить. Если всё исчезает, человеку придётся повторять заполнение. Особенно заметна эта проблема в длинной форме и на телефоне.

Считать автозаполнение проверкой данных

Сохранённый профиль может устареть или не подходить для этой ситуации. Дайте человеку просмотреть и изменить значения. На сервере проверяйте допустимость полученных данных независимо от способа их ввода.

Как проверить

• Назначение каждого поля соответствует выбранному значению autocomplete.
• При подстановке набора имя, почта и телефон попадают в свои поля.
• Повторяющиеся адреса и данные разных людей не смешиваются.
• Подписи остаются видимыми после заполнения.
• Исправленное значение действительно отправляется вместо первоначально подставленного.
• После ошибки форма сохраняет допустимые данные и позволяет продолжить.
• Без сохранённого профиля все обязательные действия выполняются вручную.

Проверьте также подписи и ошибки полей, отправку формы и сохранение данных между шагами. Если требуется доработка, опишите её в разделе «Разработка».

Вопросы и ответы

Почему браузер ничего не предлагает?

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

Можно ли ограничиться autocomplete='on'?

Это разрешает помощь без точного описания данных. Для известных полей полезнее указать подходящее стандартное значение, например email или tel.

Нужна ли подпись, если значение уже подставлено?

Да. Подпись объясняет назначение поля и позволяет проверить, верно ли подставлены данные. Она не должна исчезать после заполнения.

Отключает ли off сохранение пароля?

Гарантии нет. Менеджер паролей и браузер могут обрабатывать форму входа по своим правилам. Указывайте честное назначение полей.

Можно ли тестировать на настоящих данных клиента?

Для проверки достаточно вымышленных значений в отдельном тестовом профиле. Не переносите реальные контакты в общие снимки экрана и описание ошибки.

Автозаполнение заменяет проверку на сервере?

Нет. Способ ввода не подтверждает правильность, актуальность и допустимость данных. Проверяйте их на сервере по правилам приложения.