Необходимость повторно вводить адрес в десятый раз утомительна. Браузеры, и вы, как разработчик, можете помочь пользователям быстрее вводить данные и избежать повторного ввода. В этом модуле вы узнаете, как работает автозаполнение, и как autocomplete и другие атрибуты элементов могут гарантировать, что браузеры будут предлагать подходящие варианты автозаполнения.
Как работает автозаполнение?
В статье «Введение в автозаполнение» вы уже изучили основы автозаполнения. Но зачем браузеры предлагают автозаполнение?
Заполнение форм — занятие не из приятных, но всё же частое. Со временем вы заполняете множество форм, часто заполняя одни и те же данные. Один из способов ускорить заполнение форм — предоставить пользователям возможность автоматически заполнять поля форм ранее введёнными данными. Это называется автозаполнением.
Как браузеры узнают, какие данные нужно заполнить автоматически? Взгляните на пример поля формы, чтобы узнать.
<label for="name">Name</label>
<input name="name" id="name">
При отправке этого поля формы браузеры сохраняют значение (введённые вами данные) вместе со значением атрибута name (имя). Некоторые браузеры также учитывают атрибут id при сохранении и заполнении данных.
Допустим, несколько недель спустя вы заполняете другую форму на другом сайте. На этом сайте также есть поле формы с name="name" . Теперь ваш браузер поддерживает автозаполнение, поскольку значение name уже сохранено.
Автозаполнение особенно полезно в формах, которые вы регулярно используете, например, для регистрации и входа в систему, оплаты, оформления заказа, а также в формах, где вам необходимо ввести свое имя или адрес.
Вы можете помочь браузерам предлагать оптимальные варианты автозаполнения, используя подходящие значения для атрибута autocomplete . Существует множество возможных значений для autocomplete . Вот пример адресов.
В вашем браузере уже сохранён адрес? Отлично! После того, как вы введёте адрес в первое поле формы, браузер покажет вам список сохранённых адресов. Вы можете выбрать один, и браузер заполнит все поля, связанные с этим адресом. Автозаполнение ускоряет и упрощает заполнение форм.
Не все формы адреса имеют одинаковые поля, и порядок полей также различается. Использование правильных значений для autocomplete гарантирует, что браузер заполнит форму корректно. Существуют значения для country , postal-code и многих других .
Обеспечьте пользователям возможность быстрого входа в систему и использования безопасных паролей.
Многие люди плохо запоминают пароли. Самый распространённый пароль — «123456», за ним следуют другие легко запоминающиеся комбинации. Как использовать надёжные и уникальные пароли, не запоминая их все?
В браузерах есть встроенные менеджеры паролей, которые генерируют, сохраняют и вводят пароли автоматически. Узнайте, как вы можете помочь браузерам с автозаполнением адресов электронной почты и управлением паролями.
Вы можете использовать autocomplete="email" для поля электронной почты, чтобы пользователи получили возможность автоматического заполнения адреса электронной почты.
Поскольку это форма регистрации, пользователям не должна предоставляться возможность заполнять ранее использованные пароли. Вы можете использовать autocomplete="new-password" , чтобы браузеры предлагали возможность сгенерировать новый пароль.
В форме входа вы можете использовать autocomplete="current-password" чтобы указать браузерам, что следует предлагать возможность заполнить ранее сохраненные пароли для этого веб-сайта.
На многих сайтах можно настроить двухфакторную аутентификацию. Помимо пароля, вам будет отправлен одноразовый код по SMS или через приложение для двухфакторной аутентификации.
Разве не было бы здорово, если бы экранная клавиатура предлагала вам код, полученный в SMS-сообщении, и вы могли бы выбрать его и ввести значение? В Safari 14 и более поздних версиях для этого можно использовать autocomplete="one-time-code" . В Chrome на Android для этого можно использовать API WebOTP с помощью JavaScript.
Узнайте больше о том, как проверить телефонные номера в Интернете с помощью передовых методов проверки одноразовых паролей через SMS .
Внимание : SMS-сообщения сами по себе не являются самым безопасным методом аутентификации, поскольку номера телефонов могут быть перехвачены. Рассмотрите возможность использования других методов двухфакторной или многофакторной аутентификации .
Помогите пользователям заполнить данные своей кредитной карты
На многих сайтах электронной коммерции вы можете использовать кредитную карту для покупки товаров. Сайты могут использовать сторонние платёжные платформы, предоставляющие собственные формы, но если вам всё же нужно создать собственные платёжные формы, убедитесь, что пользователи смогут легко заполнять платёжную информацию.
Вы можете снова использовать атрибут autocomplete , чтобы браузеры предлагали правильные варианты автозаполнения.
Имеются значения для номера кредитной карты cc-number , даты истечения срока действия кредитной карты cc-exp и всей остальной информации, необходимой для оплаты кредитной картой.
Используйте единый формат ввода для номеров, таких как номера кредитных карт и телефонов, чтобы браузеры могли автоматически заполнять поля. Используйте стандартные элементы формы, например, <select> для дат платежных карт вместо пользовательских элементов, чтобы обеспечить автозаполнение.
Узнайте больше о том, как помочь пользователям избежать повторного ввода платежных данных .
Убедитесь, что автозаполнение работает для всех ваших полей
Помимо адресов, информации об учетных записях и данных кредитных карт, существует множество других полей, которые браузеры могут помочь пользователям заполнить автоматически.
При добавлении поля телефона в форму проверьте, можно ли использовать одно из доступных значений для автозаполнения. Нашли подходящее значение для поля формы? Добавьте его.
Использование подходящих значений для атрибута autocomplete помогает браузерам предлагать наилучший вариант автозаполнения и помогает пользователям быстрее заполнять формы.
Помогите браузерам понять, что поле не должно заполняться автоматически
Вы узнали, как работает автозаполнение, как можно помочь браузерам с автозаполнением и почему автозаполнение делает заполнение форм удобным для пользователей. Однако иногда бывает так, что браузеры не хотят, чтобы функция автозаполнения поддерживалась.
<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">
Автозаполнение бесполезно при вводе уникальных значений, например, одноразового кода. Значение каждый раз разное, и браузер не должен сохранять значения или предлагать функцию автозаполнения. Для таких полей можно использовать autocomplete="off" , чтобы отключить автозаполнение.
Другой вариант использования autocomplete="off" — поле-приманка (см. предыдущий модуль ). Даже если поле не отображается, браузеры могут автоматически заполнить его остальными полями. Отключение автозаполнения гарантирует, что настоящий пользователь не будет идентифицирован как бот, поскольку поле заполняется автоматически.
Отключать автозаполнение следует только в том случае, если вы уверены, что это поможет пользователям.
Проверьте свое понимание
Проверьте свои знания автозаполнения
Какое значение автозаполнения следует использовать для поля пароля в форме регистрации?
autocomplete="password"autocomplete="off"autocomplete="new-password"autocomplete="current-password"