Упрощаем заполнение форм с помощью Autofill

Люди ненавидят заполнять формы, особенно на мобильных устройствах. Формы могут быть длинными и пугающими, часто содержат большое количество шагов и проверок, и их заполнение может вызывать у пользователя недовольство и раздражение. Чтобы упростить этот процесс, браузеры уже довольно давно добавили возможность автозаполнения полей от имени пользователя. Хром сделал это 2011 году, представив Автозаполнение (Autofill), которое может заполнить всю форму целиком, используя данные из профиля пользователя в Autofill.

В следующей версии Хрома (M43) мы сделаем заполнение форм ещё проще и быстрее: мы расширим поддержку данных с кредитных карт и адресов с карт Google. Это означает, что одни и те же данные можно будет использовать и для покупок в Google Play, и на внешних сайтах. Если вы будете использовать стандартные атрибуты автозаполнения, можете быть уверены, что пользователям будет удобно иметь дело с формами на вашем сайте, потому что автозаполнение Хрома сможет заполнить их со стопроцентной точностью.

Атрибуты автозаполнения — это способ для вас как для разработчика управлять тем, как именно браузер должен заполнить конкретное поле. Например, если вы ожидаете, что пользователь введёт название улицы, с помощью autocomplete=»address-line1″ вы можете подсказать браузеру какие именно данные вы ожидаете получить. Это помешает браузеру неверно угадывать и заполнять поля форм, что было бы неудобно для пользователя.

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

прошлом многие разработчики добавляли autocomplete=»off» в поля форм, чтобы заблокировать любые действия браузера, связанные с автозаполнением. В то время как Хром по-прежнему использует этот атрибут для автодополнения, он не будет использовать его для автозаполнения. Когда же следует использовать autocomplete=»off»? Например, если вы сделали свою собственную версию автодополнения для поиска. Или у вас на сайте есть формы, в которые пользователи вводят различные данные, которые браузеру помнить не обязательно.

Наиболее распространенные атрибуты автозаполнения приведены в таблице ниже, также они описаны в Веб основах.
Основные атрибуты
Название атрибута Автозаполнение атрибута
ccname cc-name
cardnumber cc-number
cvc cc-csc
ccmonth cc-exp-month
ccyear cc-exp-year
exp-date cc-exp
card-type cc-type





Имя
Название атрибута Автозаполнение атрибута
name name (full name)
fname given-name (first name)
mname additional-name (middle name)
lname family-name (last name)


Почта
Название атрибута Автозаполнение атрибута
email email



Адрес
Название атрибута Автозаполнение атрибута
address For one address input: street-address
city For two address inputs: address-line1 , address-line2
region address-level1 (state or province)
province address-level2 (city)
state postal-code (zip code)
zip country
zip2
postal
country






Телефон
Название атрибута Автозаполнение атрибута
phone tel
mobile
country-code
area-code
exchange
suffix
ext


Атрибуты автозаполнения могут быть дополнены именем раздела, например:

shipping — имя
billing — адрес улицы

Так рекомендуется делать, потому что это сделает вашу разметки легче для чтения и понимания. Браузер автоматически заполнит различные секции отдельно, а не в виде длинной формы.
Пример формы оплаты





Полезные привычки при работе с формами

Используйте лейблы для полей ввода и убедитесь, что они отображаются, когда поле в фокусе. Элемент label подсказывает пользователю какую информацию нужно ввести в поле. Лейбл может быть связан с текстовым полем путём размещения поля внутри элемента label. Применение лейблов для элементов формы также позволяет удобнее вводить данные: пользователь может кликнуть как на текстовое поле, так и на его лейбл, чтобы установить фокус на поле и начать вводить текст.

Используйте плейсхолдеры как подсказки для полей ввода. Атрибут placeholder подсказывает пользователю какое содержимое ожидается в текстовом поле. Как правило, подсказки показываются светлым текстом, пока пользователь не начнёт печатать, и исчезают, как только пользователь начинает вводить текст. Таким образом, плейсхолдеры не являются заменой для лейблов, и должны быть использованы скорее как подсказки, чтобы сориентировать пользователя относительно содержимого поля и его формата.

Демо

Вы можете увидеть демо в действии здесь: greenido.github.io/Product-Site-101/form-cc-example.html. Или посмотреть его код на этой странице: github.com/greenido/Product-Site-101.

Источник материала
Настоящий материал самостоятельно опубликован в нашем сообществе пользователем proper на основании действующей редакции Пользовательского Соглашения. Если вы считаете, что такая публикация нарушает ваши авторские и/или смежные права, вам необходимо сообщить об этом администрации сайта на EMAIL abuse@proru.org с указанием адреса (URL) страницы, содержащей спорный материал. Нарушение будет в кратчайшие сроки устранено, виновные наказаны.

Добавить комментарий