Autofill: чого не знають веб-розробники, хоча повинні знати



Багатьом відомо, що в мобільній версії Safari можна відсканувати свою банківську карту. Але багато розробники вміють створювати форми, що підтримують цю можливість?

Готовий посперечатися, що небагато.

Справу ускладнює повне відсутність документації від Apple по роботі цієї функції. Але тут є один момент. Функція сканування банківських карт є підмножиною автозаповнення — браузерного функціоналу, давно игнорируемого веб-розробниками. Зрозуміло, чому вони не приділяли їй належної уваги: коли регулярно заповнюєш форму тестовими даними, автозаповнення зазвичай заважає. Але для наших користувачів це важлива функція. У Google з'ясували, що при використанні автозаповнення користувачі на 30% швидше заповнюють форми. Так що давайте вивчимо роботу автозаповнення, розберемося, як створювати форми, які підтримують крос-браузерне автозаповнення, і скористаємося перевагами нових можливостей зразок сканування банківських карт.

Як працює автозаповнення?
До недавнього часу не існувало стандартів, що регламентують реалізацію автозаповнення. В кожному браузері це робилося по-своєму, і було доступне дуже мало документації, що описує браузерний механізм визначення вмісту, який потрібно внести в те чи інше поле.

Незважаючи на таку анархію, можна виділити два основних підходи:

1. Поля з наперед заданим автозаповненням

Chrome, Opera і Safari виявляють найбільш важливі поля у формі і дозволяють вибирати, якими даними браузер повинен автоматично їх заповнити. Приміром, Opera вміє автоматично заповнювати адреси і реквізити банківських карт. Ця функціональність налаштовується тут:



Кожен з трьох браузерів має свій набір полів, до яких може застосувати автозаповнення, але підтримка основних полів платіжних форм реалізована практично скрізь.

Для використання автозаповнення більшості користувачів не доведеться звертатися до цих налаштувань. Браузер відстежує заповнення людиною форм і, коли розпізнає поля адреси та реквізитів банківської карти, запитує, чи потрібно зберегти введені дані для подальшого використання.

2. Автозаповнення будь-яких полів

Якщо попередній підхід можна порівняти зі скальпелем, застосовуваним до заздалегідь вибраних полях, то це схоже на бензопили, ріжучої все на своєму шляху.

Microsoft Edge і Firefox після надсилання заповненої форми зберігають всі введені дані разом зі значенням атрибута
name
. Якщо в майбутньому браузер зустріне поле з таким же атрибутом
name
, то до нього буде застосовано автозаповнення. На додаток до
name
Firefox також звертає увагу на атрибут
id
.

У цього підходу є проблеми з безпекою і приватністю, тому давно підтримується значення
off
, отключающее автозаповнення, щоб браузер не зберігав і автоматично не заповнював делікатну інформацію.

Який підхід краще?

Хоча другий підхід дозволяє працювати з великою кількістю полів, я як розробник віддаю перевагу варіант з наперед заданими полями. Так набагато простіше визначати, яку інформацію повинен заповнювати браузер, так і легше настроювати тестові профілі.

Крім того, при другому підході вам потрібно спочатку надіслати заповнену форму, щоб браузер зберіг у себе дані для подальшого автозаповнення. Без відправлення він не запам'ятає введену вами інформацію. Також мені неприємно думати, що браузер може зберігати реквізити моєї банківської картки в незашифрованому вигляді, якщо не визначить тип поля.

Зрозуміло, Microsoft і Mozilla зацікавлені у забезпеченні безпеки і приватності, і я впевнений, що вони передбачили якісь захисні механізми. Але особисто мені набагато спокійніше бачити в настройках браузера, що він розпізнає і чітко відокремлює дані по банківській карті.

Враховуючи все сказане, я не знаю переваг кінцевих користувачів. Друга система може застосовуватися ширше, але я бачив чимало звернень в службу підтримки, коли люди намагалися прибрати дані автозаповнення з історії браузера.

Буде цікаво подивитися, як зміняться Edge і Firefox після того, як почнуть підтримувати новий стандарт автозаповнення.

Поведінка, яке потрібно відстежувати

Іноді браузерам потрібно більше одного поля певного типу, щоб запропонувати вам варіанти автозаповнення. Наприклад, нижче показано, як Safari не стане автоматично заповнювати одиночне полі імені власника банківської карти, але якщо поруч є поле для номера карти, то браузер запропонує це зробити.



Тим не менше, якщо є тільки поле номера картки, Safari запропонує його заповнити. Згідно мого досвіду, з-за цього поведінки браузера буває непросто тестувати окремі ситуації з поодинокими полями. Одного разу під час тестування я зіткнувся з тим, що Opera вимагає наявності трьох полів для застосування автозаповнення, але більше мені не вдалося відтворити таку поведінку.

Якщо форма створена з підтримкою автозаповнення (про це нижче), то користувачі не повинні зустрічатися з такими ситуаціями. Я просто згадую це на випадок, якщо ви також зустрінете подібні дивацтва в процесі налагодження і тестування автозаповнення.

Використання стандартів при реалізації автозаповнення
На щастя, ситуація з автозаповненням поліпшується. Нещодавно в HTML5 був розширений атрибут
autocomplete
, подсказывающий браузеру, які дані потрібно вводити в різні поля. Цей атрибут існує вже кілька років і спочатку міг приймати два значення:
on
та
off
. За замовчуванням
autocomplete
має значення
on
, браузер може зберігати надіслані дані та автоматично заповнювати поля. Але для деяких полів автозаповнення небажано. У цьому випадку атрибуту
autocomplete
можна присвоїти значення
off
, що говорить браузеру, що це поле заповнювати не треба.

Нещодавно були додані нові значення атрибута — autofill detail tokens. Ці токени допомагають браузеру зрозуміти, яка інформація потрібна для заповнення поля.

Один з типів токенів називається autofill field names (найменування полів автозаповнення). Вони кажуть браузеру, який тип інформації вводиться в поле. Приміром, один з токенів цього типу —
organization
. Ось що про нього сказано в специфікації HTML5:

Найменування компанії, що відноситься до людини, адресою або контактної інформації в інших полях, пов'язаних з цим полем.

Приклад поля з автоматичним заповненням назви організації буде виглядати так:

<input type="text" name="foo" id="bar" autocomplete="organization">

У специфікації HTML5 є величезна таблиця, де перераховані всі 53 можливих найменування поля автозаповнення, вказано їх призначення та типи инпутов, з якими їх можна використовувати.

Це найпростіший вид автозаповнення, але воно стає потужнішим і складніше.

Доставка і біллінг

Значення атрибута
autocomplete
є розділений пробілами список токенів. Наприклад, якщо ви хочете зібрати дані для доставки товару, то перед значенням атрибута потрібно додати токен
shipping
:

<textarea name="shipping address" autocomplete="shipping street address"></textarea>
<input type="text" name="shipping-city" autocomplete="shipping address-level2">
<input type="text" name="shipping-state" autocomplete="shipping address-level1">
<input type="text" name="shipping-country" autocomplete="shipping country name">
<input type="text" name="shipping-postal-code" autocomplete="shipping postal-code">

Токен
billing
працює точно так само, як
shipping
.

Телефони, електронна пошта і ніки в месенджерах

Для номерів телефонів, адрес електронної пошти і ників в месенджерах використовується інший варіант токена. Для таких випадків передбачений опціональний токен, що означає, що в поле потрібно ввести номер домашнього (
home
), робітника (
work
), мобільного (
mobile
) телефону, факсу (
fax
) або пейджера (
pager
).

Наприклад:

<input type="tel" name="home-phone" autocomplete="home tel">
<input type="tel" name="work-phone" autocomplete="work tel">
<input type="email" name="home-email" autocomplete="home email">
<input type="url" name="chat" autocomplete="home impp">

Загальні і уточнюючі найменування полів автозаповнення

Для багатьох типів інформації в специфікації визначені загальні (broad) і уточнюючі (narrow) найменування полів автозаповнення. Скажімо, в доповнення до єдиного поля для введення номера телефону
tel
можна використовувати:

  • tel-country-code
  • tel-national
  • tel-area code
  • tel-local
  • tel-local-prefix
  • tel-local-suffix
  • tel-extension
Автори специфікації заохочують нас як можна частіше застосовувати загальні найменування:

В цілому авторам рекомендується використовувати загальні найменування, а не уточнюють, оскільки останні нав'язують західні стандарти. Наприклад, у ряді країн прийнято спочатку писати ім'я, а потім прізвище, в той час як у багатьох інших країнах прийнято писати навпаки — спочатку прізвище, потім ім'я. Також чимало країн, де використовується лише одне ім'я (мононим). Тому використання одного поля вводу є більш гнучким підходом.

Я згоден з цією рекомендацією. З практичної точки зору це означає, що важливо приділяти увагу таблиці значень і вибирати правильне найменування для кожного поля.

Розділи (Sections)

Останнім властивістю нових токенів атрибута
autocomplete
є можливість призначати груповим полів довільні розділи. Він визначається за допомогою сертифіката, починається з
section-
. Після дефіса можете писати що завгодно. У специфікації наведено такий приклад розділів:

<fieldset>
<legend>Ship the blue gift to...</legend>
<label> Address:
<input name="bc" autocomplete="section-blue shipping street address">
</label>
<label> City:
<input name="bc" autocomplete="section-blue shipping address-level2">
</label>
<label> Postal Code:
<input name="bp" autocomplete="section-blue shipping postal-code">
</label>
</fieldset>

<fieldset>
<legend>Ship the red gift to...</legend>
<label> Address:
<input name="ra" autocomplete="section-red shipping street address">
</label>
<label> City:
<input name="rc" autocomplete="section-red shipping address-level2">
</label>
<label> Postal Code:
<input name="rp" autocomplete="section-red shipping postal-code"> </label>
</fieldset>

Всі токени

Отже, тепер у нас є набагато більш складний набір токенів для атрибута
autocomplete
. І тут важливий порядок проходження токенів.

По-перше, ви використовуєте або значення
on
та
off
, або найменування полів автозаповнення — одночасно і те і інше можна.

При використанні токенів автозаповнення вони повинні слідувати в такому порядку:

[section-](optional) [shipping|billing](optional) [home|work|mobile|fax|pager](optional) [autofill field name]

Пам'ятайте, що токени
[home|work|mobile|fax|pager]
застосовуються тільки для полів вводу номерів телефонів, адрес електронної пошти і ників.

Найдовший з можливих наборів токенів автозаповнення може виглядати так:

<label for="foo">Mobile phone for delivery</label>
<input type="text" name="foo" id="foo" autocomplete="section-red shipping mobile tel">

Хай живуть стандарти! На цьому все, правильно?
Боюся, що ні. Я плекаю надію, що врешті-решт всі браузери будуть підтримувати розширений стандарт автозаповнення, але поки це не так. Я протестував мобільні і настільні версії браузерів, щоб з'ясувати поточну ситуацію з підтримкою атрибутів. Ось результати:

Браузер Версія ОС ID Name Autocomplete
Chrome 50 OS X 10.11.4 Немає Так Так
Opera 35 OS X 10.11.4 Немає Так Так
Firefox 46 OS X 10.11.4 Так Так Немає
Edge 25 Windows 10 Немає Так Немає
Safari 9.1 OS X 10.11.4 Частково Частково Частково
Safari 9 iOS 9.3.1 Частково Частково Частково
Досі тільки Chrome і Opera явним чином підтримують нові можливості автозаповнення. В Safari, судячи з усього, реалізована часткова підтримка, але з-за відсутності документації я не можу сказати, чи зроблено це свідомо, або в випадку з
autocomplete
,
name
та іншими атрибутами просто здійснюється пошук з допомогою регулярних виразів.

Дивна поведінка Safari
З моменту появи в iOS 8 функції сканування банківських карт веб-розробники займаються ворожінням на кавовій гущі, намагаючись визначити, яку комбінацію ознак шукає Safari. Хтось вважає, що в атрибуті name потрібно мати певні значення. Інші виявили, що використовуються значення ID. Здається, навіть лейбл має значення:

Поле для імені власника карти особливо хитре. Ми довго гралися з різними ID і майже здалися. Нам не вдалося обчислити ID, який змусив би Card Scan заповнити реквізити. Після численних розчарувань ми нарешті виявили, що вся справа у змісті відповідного елемента label. Як тільки ми ввели в нього ім'я, вказане на карті, все чарівним чином запрацювало.

Я провів чимало тестів і досі не можу з упевненістю стверджувати, що повністю розібрався в роботі Safari. Тим не менше я все ж прийшов до кількох основних висновків:

Autocomplete підтримується в полях введення контактів і адреси

Safari розпізнає створену мною форму, що містить тільки атрибути autocomplete. Як тільки я починаю писати в першому полі, браузер пропонує заповнити форму моїми контактними даними.



Все працює, як і повинно, але потрібно зробити кілька пояснень.

По-перше, неясно, яка інформація використовується Safari для прийняття рішення про автозаповнення моїх контактів з адресної книги повне mac ' a. Тут вказана моя посада, а назва компанії — немає.

По-друге, браузер не пропонує на вибір варіанти для заповнення. В моїх контактах вказані домашній і робочий адреси, і Safari заповнює тільки домашній. Так що мені не пощастить, якщо я захочу замовити доставку в офіс.

Автозаповнення форм платіжних працює зовсім ненадійно

Поведінка Safari докорінно змінюється, коли справа доходить до полів платіжних реквізитів. Атрибут
autocomplete
ігнорується. Замість нього браузер використовує якусь чарівну евристику. А оскільки я не маг з Apple, то мені було важко розпізнати, що ж насправді відбувається:



Тут показано, як я відредагував назви двох полів. В обох випадках були вказані
autocomplete
,
name
та
id
, щоб Safari було легше ідентифікувати поля. Тим не менш він їх не розпізнавав до тих пір, поки я не використовував як лейблів
Name on Card
та
Credit Card Number
. Як вже згадувалося, для активації автозаповнення Safari потрібно більше одного поля. Потім я спробував змінити лейбл на CCNumber, автозаповнення продовжувало працювати. А ось з підписом CC Number все зламалося.

Список значень, за якими Safari виконує пошук, ніде не опублікований. На щастя, Жак Карон зміг витягти цей список значень рядка з емулятор iOS:

  • card number
  • cardnumber
  • cardnum
  • ccnum
  • ccnumber
  • cc num
  • creditcardnumber
  • credit card number
  • newcreditcardnumber
  • new credit card
  • creditcardno
  • credit card no
  • card#
  • card #
  • cvc2
  • cvv2
  • ccv2
  • security code
  • card verification
  • name on credit card
  • name on card
  • nameoncard
  • cardholder
  • card holder
  • name des karteninhabers
  • card type
  • cardtype
  • cc type
  • cctype
  • payment type
  • expiration date
  • expirationdate
  • expdate
  • month
  • date m
  • date mo
  • year
  • date y
  • date yr
Згідно мого досвіду, в обох випадках:

<input type="text" name="nameoncard">
<input type="text" name="ccnumber">

і

<label for="foo">Name on Card</label>
<input type="text" id="foo" name="foo">
<label for="bar">Credit Card Number</label>
<input type="text" id="bar" name="bar">

спрацьовує автозаповнення в Safari і функція сканування банківської карти в iOS. Але якщо помістити ті ж значення атрибута
autocomplete
, то працювати не буде.

Створення крос-браузерної автозаполняемой форми
Враховуючи все вищесказане — чи справді можна створити форму, підтримуючу автозаповнення в різних браузерах? Я думаю, так.

Принаймні, можна дуже близько підійти до цієї мети, виконавши чотири кроки:

1. Додайте атрибути autocomplete

Це майбутнє автозаповнення. Якщо браузери не розпізнають значення, то вони їх ігнорують. Це відмінний приклад прогресивного поліпшення.

2. Використовуйте для атрибутів name стандартні значення

При реалізації автозаповнення Firefox і Edge вам залишається сподіватися, що вибрані вами значення для атрибуту
name
збігаються з тими, які використовують інші розробники на своїх сайтах. Для цього можна проаналізувати популярні сайти і подивитися, які там значення. Або можна взяти ті ж значення, що і в атрибуті autocomplete, в надії, що чим більше веб-розробників познайомляться зі стандартами, тим частіше будуть використовувати для своїх полів ті ж найменування.

На жаль, неможливо гарантувати, що користувачі Firefox і Edge раніше відвідували форму, що використовує ті ж самі значення
name
, що і у вашій формі.

3. Додайте значення name та/або label відповідно до використовуваним в Safari списком

З допомогою витягнутого Жаком Кароном списку ви можете змінити значення атрибута
name
або елемента
label
, щоб вони відповідали очікуванням Safari.

4. Внесіть автозаповнення в ваш план тестування

Нещодавно я попросив у своїх слухачів підняти руки, у кого в плані тестування є автозаповнення. Ні в кого не було. Я працюю в веб-розробки з 1996 року і досі не зустрів тих, у кого в плані тестування було б автозаповнення. Напевно, це якась сліпа зона розробників і дизайнерів. Тим не менш вкрай важливо тестувати цю функціональність, щоб упевнитися в її надійної роботи.

Фінальна форма
Ось приклад форми, підтримуючої автозаповнення в Chrome, Safari, Opera, Firefox і Edge:

<form method="post" id="usrForm">
<label for="name">Name</label>
<input type="text" id="name" name="name" autocomplete="name">
<label for="jobtitle">Job Title</label>
<input type="text" id="jobtitle" name="jobtitle" autocomplete="organization-title">
<label for="company">Organization</label>
<input type="text" id="company" name="company" autocomplete="organization">
<label for="tel">Telephone Number</label>
<input type="tel" id="tel" name="tel" autocomplete="home tel">
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="home email">
<h4>Shipping Address</h4>
<label for="address">Street Address</label>
<textarea id="address" name="address" rows="3" autocomplete="shipping street address"></textarea>
<label for="address-level2">City (Address Level 2)</label>
<input type="text" id="address-level2" name="центр" autocomplete="shipping address-level2">
<label for="state">State/Province (Address Level 1)</label>
<input type="text" id="state" name="state" autocomplete="shipping address-level1">
<label for="country name">Country Name</label>
<input type="text" id="country name" name="country name" autocomplete="shipping country name">
<label for="postal-code">Postal Code</label>
<input type="text" id="postal-code" name="postal-code" autocomplete="shipping postal-code">
<h4>Do not use a real card</h4>
<label for="nameoncard">Name on Card</label>
<input type="text" id="nameoncard" name="nameoncard" autocomplete="cc-name">
<label for="ccnumber">Credit Card Number</label>
<input type="text" id="ccnumber" name="ccnumber" autocomplete="cc-number"
<label for="cc-exp-month">Expiration Month</label>
<input type="number" id="cc-exp-month" name="cc-exp-month" autocomplete="cc-exp-month">
<label for="cc-exp-year">Expiration Year</label>
<input type="number" id="cc-exp-year" name="cc-exp-year" autocomplete="cc-exp-year">
<label for="cvv2">CVV</label>
<input type="text" id="cvv2" name="cvv2" autocomplete="cc-csc">
<input type="submit" value="Submit" name="submit">
</form>

Щоб побачити її роботу, вам потрібно переглянути її на CodePen через HTTPS, в іншому випадку браузер не заповнить реквізити банківської картки. Я також зробив форму з 53 полями по специфікації autocomplete. Поки що жоден браузер не підтримує всі ці поля.

Майбутнє автозаповнення форм
Розробники браузерів активно працюють над проблемою веб-платежів. Opera, Microsoft, Google і Facebook спільно створили Payment Request API. Apple бере участь в Web Payments Working Group, де обговорюється і Payment Request API. Так що Apple номінально теж долучилася до цього проекту.

Ходять чутки, що сервіс Apple Pay буде доступний в мобільному інтернеті до сезону святкового шопінгу, так що веб-платежі в цей раз можуть отримати новий імпульс.

Відновлення інтересу до спрощення процесу оплати вселяє в мене надію, що найближчим часом покращиться підтримка autofill detail tokens. Ці токени сильно полегшують створення форм, що працюють з автозаповненням.

І найважливіше — підтримка автозаповнення зробить заповнення форм менш стомлюючим для наших користувачів, що сприятиме зростанню продажів в сегменті e-commerce.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.