Привет, Хабр! Меня зовут Сергей, я фронтенд-разработчик в Rusprofile. Давайте поговорим о работе autocomplete – автозаполнении полей в браузере. 

Благодаря этой функциональности жизнь пользователей может быть проще. Не нужно тратить время на копание в чертогах разума в поисках почтового индекса, адреса или точного названия компании. Можно не записывать логины, ИНН и другую информацию на стикеры вокруг монитора, все нужные данные подставляются автоматически. Формы на 5-10 полей перестают выглядеть такими уж устрашающими. 

Но в то же самое время, наверное, все мы видели, как путаются местами имя и фамилия из автозаполнения, а иногда кажется, что автоматически подставляются какие-то совсем случайные значения.

Эта статья – небольшая рефлексия на тему autocomplete; о природе проблем, с которыми сталкивается разработчик при работе с этим инструментарием.

Надеюсь, будет интересно для фронтендеров, менеджеров продукта, дизайнеров – коллег, у кого в бэклоге есть задачи про формы; а также для всех, кому близки темы о веб-разработке.

Забыли пароль? 

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

Обнаружилось две проблемы:

1. У поля был атрибут autocomplete =“off” (иногда встречал значение "password”), для правильной работы требовалось значение “current-password”.

2. У формы по дизайну не было поля “username”, браузер не понимал контекст (что это форма авторизации) и, соответственно, не подставлял нужный пароль.

После добавления правильного атрибута “current-password” для поля пароля браузер начал предлагать варианты паролей, ранее использованных на этом сайте. Но выдыхать пока что было рано: когда компьютером пользуется несколько человек или если есть несколько аккаунтов – можно получить простыню из возможных вариантов заполнения. Придётся всматриваться и выбирать, неудобно.

Для полноценной работы автозаполнения необходимо передавать в форму username, скрытый input помогает решить эту проблему. 

На всякий случай оставляем комментарий в коде: “Не удалять, скрытый инпут необходим для корректной работы автозаполнения”.

После всех этих манипуляций пароль проставляется сразу при появлении формы и соответствует конкретному username. 

На мой взгляд, в этом примере можно увидеть показательную историю для автозаполнения: 

• в целом оно работает; 

• иногда может себя вести странно; 

• для его корректной работы нужно соблюдать ряд правил.

Сколько можно всё это терпеть – давайте разбираться. 

Истоки автозаполнения 

Формы в вебе существовали с незапамятных времен.

На заре интернета формы были простыми.

Но время шло, в вебе появились новые пользовательские сценарии и продукты – формы стали сложнее.

Проблема: пользователь видит большое количество элементов, “предвкушает” заполнение всего этого богатства, отваливается. Не хочет или не может тратить время. 

Когда в форме всего лишь пять полей, это целых пять полей. Не все люди будут готовы на такой подвиг, как аккуратное заполнение всех полей руками. 

Решить проблему помогает автозаполнение: необходимые данные подставляются автоматически. Дело за малым – всё это правильно настроить.

Что может пойти не так 

Правильно настроить автозаполнение – о каком числе параметров тут речь? Почта, имя пользователя, пароль, что ещё? 

Существует более 100 вариантов – на деле, по моему опыту, чаще всего используется порядка 8:

1. email

2. username

3. current-password

4. name 

5. given-name 

6. tel

7. street-address

8. organization

Вроде не так много – что может пойти не так? 

Например, можно забить забыть использовать обертку для инпутов (тэг <form>) – компонентный подход, отправка данных теперь происходит на лету. В таком случае рискуем получить ситуацию, когда значения будут подставляться на сайте куда угодно, но не в нужные поля формы.

Кто виноват? Разработчики могут по своему усмотрению использовать имена инпутов (в требованиях такие моменты оговариваются не то чтобы всегда). Пользователи – творчески заполнять значения в какие угодно поля. Браузеры – сохранять значения согласно типу полей и подставлять в похожих ситуациях значения в поля с похожими параметрами. Звёзды сходятся со всех сторон. 

Правила для работы с полями существуют, но все пользуются ими по-своему. Например, в среднем по Америке поле name подразумевает полное имя, фамилию (второе / среднее имя туда же). В России name – это имя, для фамилии – surname. Для телефонов – кто-то будет использовать только атрибут tel, кто-то – дополнительно задействует код региона.

Что хорошо отработало в Chrome, может не сработать в Firefox или Safari и наоборот. Например, разные браузеры умеют по-своему реагировать на autocomplete=”off”.

Safari говорит “ок, буду соблюдать”; при фокусе на поле не предлагает варианты.

А Chrome и Firefox говорят “плевать я хотел на твои правила, я тут закон…”  при фокусе на поле предлагают варианты автозаполнения. 

Спасибо, что хотя бы делают это при получении фокуса, а не при появлении формы.

Всё дело в том, что часть правил по работе автозаполнения оставлены на усмотрение браузера.

Для autocomplete=”off” в стандарте говорится: 

When an element's autofill field name is "off", the user agent should not remember the control's data, and should not offer past values to the user.

То есть не следует сохранять данные из поля и предлагать ранее сохраненные значения, а не нельзя (для такого случая было бы написано must not).

Что можем сделать мы? 

Как разработчики, мы можем помочь пользователям жить немного лучше и терять меньше времени при заполнении форм. Вот, что в наших силах.

(1) Вчитываться в документацию и одинаково использовать определенные типы полей

Продолжение – смотрите в следующих сериях стандартах.

(2) Использовать осмысленные id, name, label

Многие браузеры смотрят на контекст и учитывают значения этих параметров.

Плохо:

<div class=”label”>Имя:</div>
<input name="form-blue-user" id="input-Id-12341" type="text" />

Хорошо:

<label for="firstName">Имя:</label>
<input name="firstName" id="firstName" type="text" autocomplete="given-name" />

Даже если не будет autocomplete, браузер может сам правильно сопоставить тип поля и взять информацию у себя из чертог согласно этому типу.

(3) Уменьшать количество форм, запрашивать меньше информации

Сайты всё чаще позволяют пользователю зарегистрироваться только по почте или номеру телефона. Пользователь счастлив! А потом заходит внутрь сервиса, а там – колоссальное количество форм для заполнения после регистрации.

Тут точно стоит поговорить с менеджерами продукта и дизайнерами – какие поля возможны, а какие реально необходимы. Что, если мы будем использовать только простые поля (имя, адрес, номер телефона, год рождения)?

(4) Упрощать, упрощать, упрощать 

Избегать неоднозначных формулировок (“фирменное наименование” vs “товарный знак” vs “бренд”). Где возможно – не использовать составные поля (вроде даты рождения из селектов).

Автозаполнение – недостандартизованное и недооцененное 

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

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

А ещё пользователи – такие пользователи. Например, несмотря на безопасное хранение современными браузерами личных данных в зашифрованном виде локально, некоторые люди продолжают записывать логины/пароли/почтовые индексы на стикерах, вешать вокруг монитора. 

Но даже с учётом всех этих обстоятельств, думаю, автозаполнение всё же заслуживает внимания разработчиков. 

Если что-то пойдет не по плану, имя и фамилия могут поменяться местами, а в поле для адреса компании подставится её название – для пользователя перетаскивать информацию между полями может оказаться немного проще, чем заполнять всё руками с нуля.

Поэтому сколько можно терпеть ошибки автозаполнения – примерно до тех пор, пока мы хотим использовать больше доступных нам опций, как позаботиться о пользователе. 

А если иногда это будет приводить к комментариям в коде в духе “Не удалять, скрытый инпут тут нужен для корректной работы автозаполнения” – пусть лучше так, чем никак. 

Почитать по теме: 

• Официальная спецификация HTML, поддерживаемая организацией WHATWG

• Отличная статья о работе автозаполнения от Яндекса 

• Документация от Mozilla 

• Best practices от Google