Frontender Magazine

Упрощаем заполнение форм с помощью 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
    <label for="frmNameCC">Name on card</label>
    <input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">

    <label for="frmCCNum">Card Number</label>
    <input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">    

    <label for="frmCCCVC">CVC</label>
    <input name="cvc" id="frmCCCVC" required autocomplete="cc-csc"> 

    <label for="frmCCExp">Expiry</label>
    <input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">

Имя

Название атрибута Автозаполнение атрибута
name name (full name)
fname given-name (first name)
mname additional-name (middle name)
lname family-name (last name)
    <label for="frmNameA">Name</label>
    <input name="name" id="frmNameA" placeholder="Full name" required autocomplete="name">

Почта

Название атрибута Автозаполнение атрибута
email email
    <label for="frmEmailA">Email</label>
    <input type="email" name="email" id="frmEmailA" placeholder="name@example.com" required autocomplete="email">

    <label for="frmEmailC">Confirm Email</label>
    <input type="email" name="emailC" id="frmEmailC" placeholder="name@example.com" required autocomplete="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
    <label for="frmAddressS">Address</label>
    <input name="ship-address" required id="frmAddressS" placeholder="123 Any Street" autocomplete="shipping street-address">

    <label for="frmCityS">City</label>
    <input name="ship-city" required id="frmCityS" placeholder="New York" autocomplete="shipping address-level2">

    <label for="frmStateS">State</label>
    <input name="ship-state" required id="frmStateS" placeholder="NY" autocomplete="shipping address-level1">

    <label for="frmZipS">Zip</label>
    <input name="ship-zip" required id="frmZipS" placeholder="10011" autocomplete="shipping postal-code">

    <label for="frmCountryS">Country</label>
    <input name="ship-country" required id="frmCountryS" placeholder="USA" autocomplete="shipping country">

Телефон

Название атрибута Автозаполнение атрибута
phone tel
mobile
country-code
area-code
exchange
suffix
ext
    <label for="frmPhoneNumA">Phone</label>
    <input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-650-450-1212" required autocomplete="tel">

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

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

Пример формы оплаты

    <label for="frmNameCC">Name on card</label>
    <input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">

    <label for="frmCCNum">Card Number</label>
    <input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">

    <label for="frmCCCVC">CVC</label>
    <input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">

    <label for="frmCCExp">Expiry</label>
    <input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">

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

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

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

Демо

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

Пример формы, иcпользующей автозаполнение

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Ido Green
Автор:
Ido Green
GitHub:
greenido
Twitter:
@greenido
Сaйт:
https://greenido.wordpress.com/
Александр Филатов
Переводчик:
Александр Филатов
Сaйт:
http://alfilatov.com/
GitHub:
greybax
Twitter:
@greybax
Stackoverflow:
greybax

Комментарии (7 комментариев, если быть точным)

Автар пользователя
rabbiabram

вот только что-то мне кажется, что авто-заполнение данных кредитки - не очень хорошо с точки зрения безопасности.Например, если вы реально отошли на 5 минут и кто-то решил помочь в строительстве "Звезду Смерти" на кистартере

Автар пользователя
Semigradsky

Идея для стартапа: 1. делаем поля ввода данных кредитки автозаполняемыми 2. убираем эти поля куда-нибудь за экран, чтобы их не было видно

css .credit-fields { position: absolute; left: 1000000px; } 1. ??? 2. PROFIT!

Автар пользователя
brusherru

Вот только для автозаполнения данных карты нужно знать CVC код, иначе хром не даст её подставить. И ничего кроме последних четырех циферок узнать не удастся. ;) Но да, оставлять свою карточку рядом со своим компом не стоит, если боитесь что рядом с вами есть злоумышленники, желающие купить чего-нибудь за ваш счет. При том не анонимно +)

Автар пользователя
Semigradsky

@brusherru , так CVC код тоже автозаполняется

html <input name="cvc" id="frmCCCVC" required="" autocomplete="cc-csc">

Автар пользователя
eimrine

У меня в последнем Chrome не работает автозаполнение поля "Confirm Email" в демке. Всегда ненавидел это поле по причине полной его бессмысленности.

Автар пользователя
Ayaweb

Это только для input-ов работает. Радио-баттоны и чекбоксы нельзя заполнять? Было бы удобно для таких полей, как пол, например.

Автар пользователя
brusherru

@Semigradsky автозаполняется. Но хром перед автозаполнением данных карты сначала сам спрашивает cvc-код от запомненных данных. Окошко типа prompt(). Насчет остальных браузеров не знаю, но думаю что ситуация схожая.

В общем вы попробуйте провернуть это, и если у вас получится — поделитесь ссылкой, все дружно протестим в различных браузерах ;)