Автозаполнение форм

Необычная страница для поисковой системы: как заставить автозаполнение браузера работать в ваших формах. Yandex включает это, потому что измерил результат — конверсия заказов на 5–10% выше на сайтах, где автозаполнение работает корректно.

Диагностика, которая экономит время

Yandex заявляет прямо: если автозаполнение не работает в Yandex Browser, оно, скорее всего, не будет работать и в других браузерах. Эвристики распознавания в целом схожи, поэтому один браузер является разумным показателем для всех остальных.

Правила разметки

• Форма должна соответствовать стандартам HTML.
• Поля ввода нуждаются в autocomplete атрибуте с валидным значением — given-name, email и так далее.
• Поля ввода должны быть дочерними элементами form элемента.
• Атрибуты должны быть интуитивно понятными: first_name, fname, given_name для имени; phone, tel, telephone для номера; org, company для организации.
• label for= должен однозначно указывать на свое поле ввода.

Контрпример Yandex поучителен: id="xdia_13" не распознается; name="mail address" двусмысленно между адресом электронной почты и почтовым адресом; текстовая область с плейсхолдером “Address” может быть электронной почтой, адресом доставки или веб-сайтом.

Отправка формы, тонкая половина

Браузер сохраняет введенные данные только в том случае, если может определить, что форма была отправлена. Надежным сигналом является form элемент, содержащий input type="submit". Без них браузер прибегает к эвристикам — отслеживанию навигации, AJAX-запросов, удаленных iframeов, скрытых полей — которые, как признает Yandex, иногда срабатывают ложно и сохраняют неверные данные. A div стилизованный под кнопку и подключенный к JavaScript, — это паттерн, который ломает работу.

Отключение

Любое невалидное autocomplete значение отключает автозаполнение — none, nope, что угодно произвольное. Yandex не гарантирует, что это работает везде, и просит сайты с неработающим автозаполнением связаться с командой браузера, а не отключать его.