Повторно вводить адрес в десятый раз утомительно. Браузеры и вы, как разработчик, можете помочь пользователям быстрее вводить данные и избегать повторного ввода данных. Этот модуль научит вас, как работает автозаполнение и как autocomplete и другие атрибуты элементов могут гарантировать, что браузеры предлагают соответствующие параметры автозаполнения.
Как работает автозаполнение?
Во введении к автозаполнению вы уже изучили основы автозаполнения. Но почему браузеры предлагают автозаполнение?
Заполнение форм — занятие неинтересное, но тем не менее то, чем вы часто занимаетесь. Со временем вы заполняете множество форм и часто заполняете одни и те же данные. Один из способов помочь пользователям быстрее заполнять формы — предложить им возможность автоматического заполнения полей формы ранее введенными данными. Это автозаполнение.
Как браузеры узнают, какие данные нужно автозаполнять? Чтобы узнать это, взгляните на пример поля формы.
<label for="name">Name</label>
<input name="name" id="name">
Если вы отправите это поле формы, браузеры сохранят значение (введенные вами данные) вместе со значением атрибута name (имя). Некоторые браузеры также обращают внимание на атрибут id при хранении и заполнении данных.
Скажем, несколько недель спустя вы заполняете еще одну форму на другом сайте. Этот сайт также содержит поле формы с 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 OTP .
Помогите пользователям заполнить данные своей кредитной карты.
На многих сайтах электронной коммерции вы можете использовать свою кредитную карту для покупки продуктов. Сайты могут использовать сторонние платежные платформы, которые предоставляют свои собственные формы, но если вам все же необходимо создать свои собственные платежные формы, убедитесь, что люди могут легко заполнять платежную информацию.
Вы можете снова использовать атрибут 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"