Автозаполнение¶
Узнайте все об автозаполнении и атрибуте autocomplete.
Повторный ввод адреса в десятый раз - это утомительно. Браузеры и вы, как разработчик, можете помочь пользователям быстрее вводить данные и избегать повторного ввода. В этом модуле вы узнаете, как работает автозаполнение и как autocomplete и другие атрибуты элементов могут гарантировать, что браузеры предлагают соответствующие опции автозаполнения.
Как работает автозаполнение?¶
В разделе intro to autofill вы уже познакомились с основами автозаполнения. Но почему браузеры предлагают автозаполнение?
Заполнение форм - не самое интересное занятие, но все же частое. Со временем вы заполняете множество форм и часто вводите одни и те же данные. Один из способов помочь пользователям быстрее заполнять формы - предложить им возможность автоматически заполнять поля формы ранее введенными данными. Это и есть автозаполнение.
Как браузеры узнают, какие данные нужно автозаполнять? Для этого рассмотрим пример поля формы.
1 2 | |
При отправке этого поля формы браузеры сохраняют его значение (введенные данные) вместе со значением атрибута name (имя). Некоторые браузеры при хранении и заполнении данных также обращают внимание на атрибут id.
Допустим, спустя несколько недель Вы заполняете другую форму на другом сайте. Этот сайт также содержит поле формы с name="name". Теперь браузер может предложить автозаполнение, поскольку значение name уже сохранено.
Используйте CSS-псевдокласс :autofill для стилизации элементов управления формами, которые браузер заполнил автоматически. Для лучшей совместимости с браузерами используйте :autofill и версию с префиксом :-webkit-autofill.
Автозаполнение особенно полезно в формах, которые вы регулярно используете, таких как регистрация и вход в систему, оплата, оформление заказа, а также в формах, где нужно ввести свое имя или адрес.
Давайте посмотрим, как можно помочь браузерам предлагать наилучшие варианты автозаполнения, используя соответствующие значения для атрибута autocomplete. Помогите пользователям ввести свой адрес Существует множество возможных значений для autocomplete. Давайте сначала рассмотрим адреса.
В вашем браузере уже есть адрес, сохраненный для вас? Отлично! После того как вы выполните действия с первым полем формы адреса, браузер покажет вам список сохраненных адресов. Вы можете выбрать один из них, и браузер заполнит все поля, относящиеся к этому адресу. Автозаполнение позволяет быстро и легко заполнять формы.
Не все адресные формы содержат одинаковые поля, порядок полей также различен. Использование правильных значений для autocomplete гарантирует, что браузер заполнит правильные значения для формы. Существуют значения для country, postal-code и многие другие.
Для autocomplete можно задать несколько значений, разделенных пробелом. Например, у вас есть форма с адресом доставки и другая форма для адреса выставления счета. Чтобы указать браузеру почтовый индекс для адреса выставления счета, можно использовать autocomplete="billing postal-code". Для адреса доставки в качестве первого значения используйте shipping.
Обеспечьте пользователям быстрый вход в систему и используйте надежные пароли¶
Многие люди не умеют запоминать пароли. Самый распространенный пароль - '123456', за ним следуют другие легко запоминающиеся комбинации. Как же использовать надежные и уникальные пароли, не запоминая их все?
Браузеры имеют встроенные менеджеры паролей, которые генерируют, сохраняют и заполняют пароли за вас. Рассмотрим, как можно помочь браузерам с автозаполнением писем и управлением паролями.
Вы можете использовать autocomplete="email" для поля email, чтобы пользователи получали возможность автозаполнения адреса электронной почты.
Поскольку это форма регистрации, пользователи не должны получать возможность вводить ранее использованные пароли. Можно использовать autocomplete="new-password", чтобы браузеры предлагали возможность сгенерировать новый пароль.
Для обеспечения безопасности формы регистрации лучше использовать стороннего провайдера идентификации, а не создавать собственную систему аутентификации.
В форме входа в систему можно использовать autocomplete="current-password", чтобы указать браузерам на возможность ввода ранее сохраненных паролей для этого сайта.
На многих сайтах можно настроить двухфакторную аутентификацию. В дополнение к паролю отправляется одноразовый код по SMS или через приложение двухфакторной аутентификации.
Было бы здорово, если бы код, полученный в SMS-сообщении, предлагался экранной клавиатурой, и можно было бы сразу выбрать его для ввода значения? В Safari 14 или более поздней версии для этого можно использовать autocomplete="one-time-code". В Chrome на Android для этого можно использовать WebOTP API с помощью JavaScript.
Подробнее о том, как проверять телефонные номера в Интернете, можно узнать из статьи SMS OTP form best practices.
SMS сам по себе не является самым надежным методом аутентификации, поскольку телефонные номера могут быть переработаны и перехвачены. Рассмотрите возможность использования других методов двухфакторной аутентификации или многофакторной аутентификации.
Подробнее о многофакторной аутентификации.
Помогите пользователям заполнить информацию о кредитной карте¶
На многих сайтах электронной коммерции для покупки товаров можно использовать кредитную карту. Сайты могут использовать сторонние платежные платформы, которые предоставляют свои собственные формы, но если вам необходимо создать собственные формы оплаты, убедитесь, что люди могут легко заполнить платежную информацию.
Можно снова использовать атрибут autocomplete, чтобы браузеры предлагали правильные варианты автозаполнения.
Для оплаты кредитной картой существуют значения номера кредитной карты cc-number, даты окончания действия кредитной карты cc-exp и вся остальная необходимая информация.
Используйте единый ввод для таких чисел, как номера кредитных карт и телефонов, чтобы обеспечить автозаполнение в браузерах. Используйте стандартные элементы формы, например, <select> для дат оплаты кредитной картой, вместо пользовательских элементов, чтобы обеспечить возможность автозаполнения.
Подробнее о том, как помочь пользователям избежать повторного ввода платежных данных.
Убедитесь, что автозаполнение работает для всех ваших полей¶
Помимо адресов, информации о счетах и кредитных картах, существует множество других полей, в которых браузеры могут помочь пользователям с помощью автозаполнения.
При добавлении в форму телефонного поля проверьте, можно ли использовать для автозаполнения любое из доступных значений. Нашли подходящее значение для поля вашей формы? Добавьте его.
Использование подходящих значений для атрибута autocomplete помогает браузерам предлагать наилучшие варианты автозаполнения и помогает пользователям быстрее заполнять формы.
Помогите браузерам понять, что поле не должно быть автозаполняемым¶
Вы узнали, как работает автозаполнение, как можно помочь браузерам с автозаполнением и почему автозаполнение делает заполнение форм удобным для пользователей. Однако иногда бывает так, что браузеры не хотят предлагать автозаполнение. Давайте посмотрим.
1 2 3 4 5 6 7 | |
Одно из мест, где автозаполнение не поможет, - это ввод одноразовых, уникальных значений, например, в поле одноразового кода. Значение каждый раз разное, и браузер не должен сохранять значения или предлагать опцию автозаполнения. Для предотвращения автозаполнения таких полей можно использовать autocomplete="off".
Автозаполнение и автокомплит обеспечивают преимущества доступности. Используя автозаполнение, людям не нужно запоминать информацию или вводить ее вручную.
Более подробную информацию можно найти в W3C accessibility guidelines
Другим вариантом использования autocomplete="off" является поле с медовой точкой (см. предыдущий модуль). Даже если это поле не видно, браузеры могут автозаполнять его вместе с остальными полями. Отключение автозаполнения гарантирует, что реальный пользователь не будет идентифицирован как бот из-за того, что поле заполняется автоматически.
Вы узнали, как важно использовать уникальные и надежные пароли. Встроенные в браузеры менеджеры паролей позволяют использовать надежные пароли. Поэтому браузеры будут предлагать опции автозаполнения паролей, даже если используется autocomplete="off", чтобы менеджеры паролей могли выполнять свою работу.
Подробнее о атрибуте автозаполнения и полях регистрации.
Отключать автозаполнение следует только в том случае, если вы уверены, что это поможет пользователям.
Ресурсы¶
Источник — Autofill