Упрощаем заполнение форм с помощью 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 input name="ccname" >"frmNameCC" required placeholder="Full Name" autocomplete="cc-name"> label for="frmCCNum">Card Number input name="cardnumber" >"frmCCNum" required autocomplete="cc-number"> label for="frmCCCVC">CVC input name="cvc" >"frmCCCVC" required autocomplete="cc-csc"> label for="frmCCExp">Expiry input name="cc-exp" >"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 input name="name" >"frmNameA" placeholder="Full name" required autocomplete="name">
Почта
| Название атрибута | Автозаполнение атрибута |
|---|---|
label for="frmEmailA">Email input type="email" name="email" >"frmEmailA" placeholder="[email protected]" required autocomplete="email"> label for="frmEmailC">Confirm Email input type="email" name="emailC" >"frmEmailC" placeholder="[email protected]" 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 input name="ship-address" required >"frmAddressS" placeholder="123 Any Street" autocomplete="shipping street-address"> label for="frmCityS">City input name="ship-city" required >"frmCityS" placeholder="New York" autocomplete="shipping address-level2"> label for="frmStateS">State input name="ship-state" required >"frmStateS" placeholder="NY" autocomplete="shipping address-level1"> label for="frmZipS">Zip input name="ship-zip" required >"frmZipS" placeholder="10011" autocomplete="shipping postal-code"> label for="frmCountryS">Country input name="ship-country" required >"frmCountryS" placeholder="USA" autocomplete="shipping country">
Телефон
| Название атрибута | Автозаполнение атрибута |
|---|---|
| phone | tel |
| mobile | |
| country-code | |
| area-code | |
| exchange | |
| suffix | |
| ext |
label for="frmPhoneNumA">Phone input type="tel" name="phone" >"frmPhoneNumA" placeholder="+1-650-450-1212" required autocomplete="tel">
Атрибуты автозаполнения могут быть дополнены именем раздела, например:
Так рекомендуется делать, потому что это сделает вашу разметки легче для чтения и понимания. Браузер автоматически заполнит различные секции отдельно, а не в виде длинной формы.
Пример формы оплаты
label for="frmNameCC">Name on card input name="ccname" >"frmNameCC" required placeholder="Full Name" autocomplete="cc-name"> label for="frmCCNum">Card Number input name="cardnumber" >"frmCCNum" required autocomplete="cc-number"> label for="frmCCCVC">CVC input name="cvc" >"frmCCCVC" required autocomplete="cc-csc"> label for="frmCCExp">Expiry input name="cc-exp" >"frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">
Полезные привычки при работе с формами
- Используйте лейблы для полей ввода и убедитесь, что они отображаются, когда поле в фокусе. Элемент label подсказывает пользователю какую информацию нужно ввести в поле. Лейбл может быть связан с текстовым полем путём размещения поля внутри элемента label . Применение лейблов для элементов формы также позволяет удобнее вводить данные: пользователь может кликнуть как на текстовое поле, так и на его лейбл, чтобы установить фокус на поле и начать вводить текст.
- Используйте плейсхолдеры как подсказки для полей ввода. Атрибут placeholder подсказывает пользователю какое содержимое ожидается в текстовом поле. Как правило, подсказки показываются светлым текстом, пока пользователь не начнёт печатать, и исчезают, как только пользователь начинает вводить текст. Таким образом, плейсхолдеры не являются заменой для лейблов, и должны быть использованы скорее как подсказки, чтобы сориентировать пользователя относительно содержимого поля и его формата.
Автозаполнение
Экстра элемент «Автозаполнение» формы чем-то напоминает элемент формы «Выпадающий список», но поддерживает гораздо большее количество вариантов ответа. Главное отличие от выпадающего списка в том, что элемент формы «Автозаполнение» помогает пользователю выбрать необходимый вариант ответа, предлагая подходящие варианты по первым набранным им символам. Чтобы добавить элемент «Автозаполнение» в форму, вам необходимо кликнуть на выбранный пункт или перетащите его вправо, тогда справа вы увидите добавленный элемент:
После того, как вы добавили элемент «Автозаполнение», нажмите на иконку «Редактировать» и перед вами откроется всплывающее окно редактирования данного элемента:
В режиме редактирования вы можете настроить варианты для элемента «Автозаполнения», для этого откройте «Настройки элемента»:
Чтобы дать возможность выбрать несколько вариантов, включите опцию в поле «Множественный выбор»:
При включенной опции «Множественный выбор» доступны поля с минимальным и максимальным количеством выбранных ответов:
По аналогии с выпадающим списком добавьте нужные варианты ответа:
Чтобы просмотреть уже настроенную форму, кликните на иконку «Просмотр» и в вашем браузере в новой вкладке откроется форма:
Значение и описание других полей, вы можете посмотреть здесь «Основные параметры элементов». Теперь при вводе хотя бы пары букв, появляются варианты, что облегчает пользователю с выбором ответа:
При выборе нескольких вариантов форма будет так выглядеть:
Легкое автозаполнение форм на любом используемом вами устройстве с помощью KeeperFill
Keeper 101: Автоматическое заполнение с помощью KeeperFill
Что такое автоматическое заполнение?
Автозаполнение — это функция, которая автоматически вводит ваше имя пользователя, пароль и прочую информацию, такую как данные платежных карт и адреса, в поля для входа в систему и онлайн-формы. Автозаполнение упрощает доступ к вашим учетным записям через браузеры или приложения, поскольку позволяет мгновенно входить в систему.
Что такое KeeperFill и как это работает?
KeeperFill ® – это функция мобильного приложения, браузерного расширения и настольного приложения Keeper Security, которая автоматически вводит ваши учетные данные для входа и прочую информацию. Вы можете использовать KeeperFill для ввода информации о кредитной карте и других данных в различных формах, таких как адрес доставки и платежный адрес, что экономит ваше время и упрощает вашу жизнь в Интернете.
Keeper Password Manager хранит ваши учетные данные в зашифрованном хранилище, доступ к которому вы можете получить с помощью мастер-пароля. Если вы вошли в Keeper и перешли на сайт, для которого сохранены учетные данные, KeeperFill автоматически введет ваше имя пользователя и пароль. Эта функция работает на мобильных устройствах, ноутбуках и настольных компьютерах и при необходимости может быть отключена в любое время.
Зачем использовать KeeperFill вместо функции автозаполнения из браузера?
Повышенная безопасность
Когда вы сохраняете информацию в веб-браузере, эта информация не шифруется. Это означает, что если киберпреступник получит доступ к вашему браузеру, он сможет увидеть всю информацию, хранящуюся в виде открытого текста, что поставит все ваши данные под угрозу компрометации.
Информация, хранящаяся в Keeper, полностью зашифрована и доступна только вам при входе на веб-сайт. Никто, кроме вас, не сможет получить доступ к вашим паролям или другой сохраненной информации, потому что только у вас есть средства для расшифровки ваших данных.
Мультиплатформенное удобство
Функция автозаполнения из браузера работает только при использовании этого конкретного браузера. Например, если вы используете Chrome в качестве основного браузера на настольном компьютере, но используете Safari в качестве мобильного браузера, учетные данные для входа, сохраненные вами в одном браузере, недоступны в другом браузере.
KeeperFill работает во всех браузерах и платформах, а также в мобильных приложениях, а это означает, что вы сможете получить доступ к своим паролям из любого места и с любого устройства.
Вводите не только имена пользователей и пароли
Помимо ввода данных для входа, KeeperFill может также вводить коды двухфакторной аутентификации, данные платежных карт, адреса и другую сохраненную информацию.
Легко обновляйте пароли
KeeperFill дает возможность легко и просто менять пароли на любом веб-сайте и помогает вам в процессе смены пароля.
Таймер выхода из системы
Один из многих рисков, связанных с браузерными менеджерами паролей, заключается в том, что они остаются в системе, что может приводить к легкой компрометации паролей.
Используя KeeperFill, вы можете включить таймер выхода из системы, который выведет вас из системы после определенного периода бездействия. Это защищает вас в ситуации, когда вы отходите от своего устройства.
Дополнительные возможности
Браузерное расширение Keeper позволяет создавать надежные уникальные пароли и мгновенно сохранять их в хранилище Keeper.
Автоматическое заполнение вашего адреса в формах
Примечание: Функция автозаполнения адреса в настоящий момент доступна для релизов Firefox на английском языке для пользователей, находящихся в США.
Firefox позволяет вам автоматически заполнять ваш адрес в формах (например, когда вы заказываете что-то онлайн). Следуйте этим шагам для управления этой функцией.
Включение и отключение автозаполнения адреса
- На Панели меню в верхней части экрана нажмите Firefox и выберите Настройки . Нажмите кнопку меню и выберите Настройки .
- Щёлкните по панели Приватность и Защита и прокрутите страницу до раздела Формы и автозаполнение .
- Отметьте флажок Автозаполнение адресов, чтобы включить его, или снимите флажок для отключения.
Мы рекомендуем включать эту функцию только для личных компьютеров.
Автозаполнение полей, не связанных с адресом: Чтобы отключить автозаполнение в других типах полей, прочитайте статью Контролируйте, будет ли Firefox автоматически заполнять формы.
Редактирование ваших сохранённых адресов
Используйте эту настройку для добавления, удаления или изменения сохранённых адресов в Firefox.
- На Панели меню в верхней части экрана нажмите Firefox и выберите Настройки . Нажмите кнопку меню и выберите Настройки .
- Щёлкните по панели Приватность и Защита и прокрутите страницу до раздела Формы и автозаполнение .
- Щёлкните по кнопке Сохранённые адреса… .
- Выберите один из следующих вариантов:
- Добавить…: Введите новый адрес с помощью этой кнопки.
- Изменить…: Выберите адрес, который хотите изменить, затем щёлкните по кнопке Изменить , чтобы его изменить.
- Удалить: Выберите адрес, который вы хотите удалить, затем щёлкните по кнопке Удалить .
- Щёлкните по x, чтобы сохранить изменения и закрыть окно.
Эти прекрасные люди помогли написать эту статью:
Станьте волонтёром
Растите и делитесь опытом с другими. Отвечайте на вопросы и улучшайте нашу базу знаний.