Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

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

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.

Share and Enjoy:
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Śledzik
  • Blip
  • Blogger.com
  • Gadu-Gadu Live
  • LinkedIn
  • MySpace
  • Wykop

Zostaw komentarz

XHTML: Możesz użyć następujących tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>