Что такое автозаполнение форм — и почему браузер не узнаёт твои поля

Смотри, обидная штука. Ты назвал поле name="user_email", поставил id="mail", подписал «Электронная почта». Человеку всё понятно с первого взгляда. А браузер молчит: подсказку не предлагает, ничего не подставляет.

Потому что твои названия он почти не читает. Браузер ищет одно конкретное слово из своего короткого словаря — и ищет его в атрибуте autocomplete.

Что вообще делает автозаполнение

Автозаполнение (autofill) — это когда браузер сам подставляет в форму то, что человек уже вводил раньше: имя, почту, адрес, телефон. Данные лежат в браузере, а не у тебя на сервере: он их запомнил или ему их один раз сохранили. Карты и пароли — там же, но обычно за дополнительным подтверждением.

Звучит как мелочь, пока ты за компьютером. На телефоне это разница между «один тап» и «минута тыканья по адресу с индексом». Каждая такая минута — часть людей, которые твою форму обратной связи просто не дозаполнят.

Браузер ищет не твои имена, а слова из списка

В HTML есть готовый словарь значений autocomplete. Он не бесконечный и не выдумывается на ходу — это фиксированный список из стандарта: email, name, given-name, family-name, tel, street-address, postal-code, country-name, bday, organization, cc-number, cc-exp и ещё несколько десятков.

Выглядит это так:

<label for="email">Электронная почта</label>
<input id="email" name="email" type="email" autocomplete="email" />

<label for="fullname">Имя и фамилия</label>
<input id="fullname" name="fullname" type="text" autocomplete="name" />

Пара неочевидных деталей из стандарта:

• Одно поле «имя» лучше двух. MDN прямо рекомендует name вместо разбивки на given-name и family-name — имена у людей устроены слишком по-разному, чтобы всех уложить в «имя + фамилия».
• Если адресов два, их надо различать. Для доставки и для оплаты пиши autocomplete="shipping postal-code" и autocomplete="billing postal-code" — иначе браузер подставит в оба поля одно и то же значение.
• Пароли — это три разных слова. current-password для входа, new-password при регистрации и смене пароля, one-time-code для кода из СМС. Разница рабочая: с new-password менеджер паролей не подставит старый пароль и предложит сгенерировать новый, а с one-time-code код подставляется прямо над клавиатурой телефона.

Почему «просто выключить» не получается

Первое, что делают почти все: autocomplete="off". И оно не работает так, как ты ждёшь.

По описанию MDN, в большинстве современных браузеров off не мешает менеджеру паролей предложить сохранить логин с паролем и подставить их потом на странице входа. Браузеры сознательно игнорируют этот атрибут на формах авторизации — слишком много сайтов ломали людям вход.

Второй трюк ещё хуже: написать выдуманное значение вроде autocomplete="nope", чтобы браузер «не понял» поле. Он и правда не поймёт — и не сможет помочь никому. Заодно это провал критерия доступности WCAG 1.3.5 «Identify Input Purpose» (уровень AA): назначение поля должно определяться программно. За этим требованием стоят живые люди — те, кто не помнит адрес наизусть, и те, кому физически тяжело печатать.

off уместен там, где подстановка реально вредна: капча, одноразовый токен, поле, куда каждый раз вводят новое значение.

Что сделать в своей форме прямо сейчас

Браузеру для автозаполнения обычно нужно пять вещей — MDN перечисляет их почти дословно:

1. Поля лежат внутри <form>, а не просто на странице.
2. У формы есть кнопка отправки.
3. У поля есть name или id.
4. У поля есть <label for="..."> — подпись, а не только placeholder.
5. У поля правильный type и правильный autocomplete.

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

Проверить просто: открой форму, начни печатать в первое поле и посмотри, предложит ли браузер подсказку. Если нет — ищи опечатку в autocomplete; неверное значение браузер молча игнорирует, ошибки в консоли не будет. На телефоне проверь отдельно: мобильная версия — как раз то место, где автозаполнение экономит больше всего.

Автозаполнение — это то же самое, что менеджер паролей?

Нет, хотя выглядит похоже. Автозаполнение встроено в браузер и работает с обычными данными: имя, адрес, телефон. Менеджер паролей — отдельная система (в браузере или внешняя), она хранит логины и пароли и подчиняется своим правилам. Поэтому autocomplete="off" может отключить первое и не отключить второе.

Нужен ли autocomplete, если поле в форме одно?

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