Automatyczne wypełnianie formularzy
Autor: Piotr Karpiuk o wtorek 29. Wrzesień 2015
Jedną z głównych przeszkód w e-handlu jest zmuszanie internautów do wypełniania formularzy z danymi karty kredytowej i adresu wysyłki (a nawet zakładania konta) na każdej witrynie na której chcemy coś kupić. Jest to niewygodne i zabiera czas, zwłaszcza na urządzeniach mobilnych.
Opisywany dziś standard wdrożony m.in. przez przeglądarkę Google Chrome działa następująco:
- Dane użytkownika przechowywane są w przeglądarce (dane karty kredytowej, adresu wysyłki, płeć, imię i nazwisko, awatar itp.),
- Od twórcy każdej witryny chcącej skorzystać z takiego „portfela” przy automatycznym wypełnianiu formularza wymaga się trzymania pewnych standardów przy konstrukcji formularza, a także zabezpieczenia strony z formularzem aktualnym certyfikatem SSL,
- Wystarczy że użytkownik jeden raz wypełni formularz tego typu na dowolnej witrynie zgodnej ze standardem (np. tu), aby później można było na innej witrynie wypełnić formularz „jednym kliknięciem”. W praktyce, aby zapobiec nadużyciom, użytkownik musi jeszcze ręcznie podać 3-cyfrowy kod CVC karty kredytowej (patrz rysunek).
Jaki to zatem standard musi być zachowany przy konstrukcji formularza? W HTMLu formularza kluczowy jest tu atrybut autocomplete, który dla każdego rodzaju danych musi przyjąć określoną w standardzie wartość, np. dla pola z numerem karty kredytowej musi to być "cc-number":
Numer karty: <input type="text" autocomplete="cc-number" name="card-num">
Zauważ, że nazwa pola (pole name) ma znaczenie dla serwera WWW przetwarzającego dane formularza, ale nie ma znaczenia dla automatycznego wypełniania formularza. Lista dostępnych wartości atrybutu autocomplete jest dostępna w Internecie.
W odpowiedzi na zdarzenie naciśnięcia przycisku należy wykonać metodę requestAutocomplete() formularza:
document.getElementById('fill-button').onclick = function( event ) {
var form = document.getElementById('myform');
form.requestAutocomplete();
event.preventDefault();
}
Przydatne zasoby
- Opis standardu W3C: 4.10.19.8 Autofill,
- RequestAutocomplete – take my money, not my time (artykuł na html5rocks.com)
- Simplify checkout with requestAutocomplete API
- Przykład formularza zgodnego ze standardem,
- Generator numerów kart kredytowych – przydatne gdy chcemy się pobawić, potrzebujemy poprawnego numeru karty kredytowej i kodu CVC a być może nie chcemy podawać swoich prawdziwych danych.
Przydatna uwaga: jeśli chcesz się pobawić i sprawdzić działanie formularza na swojej stronie internetowej, a nie masz aktualnego certyfikatu SSL, uruchom przeglądarkę Chrome z opcją --reduce-security-for-testing.
