Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Archiwum dla Wrzesień, 2015

Automatyczne wypełnianie formularzy

Autor: Piotr Karpiuk o 29. września 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

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.

Napisany w HTML5, Nowoczesne przeglądarki WWW, WWW | Brak komentarzy »