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

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

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

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

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

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

Наиболее распространенные атрибуты автозаполнения приведены в таблице ниже, также они описаны в Веб основах.

Основные атрибуты

    <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">

Имя

    <label for="frmNameA">Name</label>
    <input name="name" id="frmNameA" placeholder="Full name" required autocomplete="name">

Почта

    <label for="frmEmailA">Email</label>
    <input type="email" name="email" id="frmEmailA" placeholder="[email protected]" required autocomplete="email">

    <label for="frmEmailC">Confirm Email</label>
    <input type="email" name="emailC" id="frmEmailC" placeholder="[email protected]" required autocomplete="email">

Адрес

    <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">

Телефон

    <label for="frmPhoneNumA">Phone</label>
    <input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-650-450-1212" required autocomplete="tel">

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

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

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

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

    <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.