Ćwiczenia z programowania dotyczące formularzy płatności

Sam Dutton

Z tego ćwiczenia w Codelabs dowiesz się, jak utworzyć bezpieczny, dostępny i łatwy w użyciu formularz płatności.

Krok 1. Użyj kodu HTML zgodnie z przeznaczeniem

Użyj elementów stworzonych do tego zadania:

  • <form>
  • <section>
  • <label>
  • <input>, <select>, <textarea>
  • <button>

Jak zobaczysz, te elementy umożliwiają korzystanie z wbudowanych funkcji przeglądarki, ułatwiają dostępność i dodają znaczników znaczeń.

  • Kliknij Remix to Edit (Zmiksuj do edycji), aby umożliwić edycję projektu.

Sprawdź kod HTML formularza w index.html.

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label>Card number</label>
    <input>
  </section>

  <section>
    <label>Name on card</label>
    <input>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label>Expiry date</label>
      <input>
    </div>
    <div>
      <label>Security code</label>
      <input>
      <div class="explanation">Last 3 digits on back of card</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

Istnieją <input> elementy dla numeru karty, imienia i nazwiska na karcie, daty ważności i kodu zabezpieczającego. Wszystkie są zapakowane w elementy <section> i mają etykiety. Przycisk Zrealizuj płatność to element HTML<button>. W dalszej części tego ćwiczenia dowiesz się więcej o funkcjach przeglądarki, do których możesz uzyskać dostęp za pomocą tych elementów.

Aby wyświetlić formularz płatności, kliknij Wyświetl aplikację.

  • Czy formularz działa wystarczająco dobrze?
  • Czy jest coś, co można by zmienić, aby wszystko działało lepiej?
  • A na komórce?

Aby wrócić do kodu źródłowego, kliknij Wyświetl źródło.

Krok 2. Zaprojektuj stronę na urządzenia mobilne i komputery

Dodany kod HTML jest prawidłowy, ale domyślny styl przeglądarki utrudnia korzystanie z formularza, zwłaszcza na urządzeniach mobilnych. Nie wygląda też zbyt dobrze.

Jeśli chcesz, aby Twoje formularze dobrze działały na różnych urządzeniach, dostosuj dopełnienie, marginesy i rozmiary czcionek.

Skopiuj cały kod CSS poniżej i wklej go do swojego pliku css/main.css.

To niezły styl CSS! Najważniejsze kwestie, na które należy zwrócić uwagę, to zmiany rozmiarów:

  • Do danych wejściowych dodano padding i margin.
  • Wartości font-size i inne wartości różnią się w zależności od rozmiaru widocznego obszaru.

Gdy wszystko będzie gotowe, kliknij Wyświetl aplikację, aby zobaczyć sformatowany formularz. Zauważysz też, że obramowania zostały dopasowane, a etykiety są oddzielone od siebie, a pola wejściowe mogą mieć pełną szerokość.display: block; Sprawdzone metody dotyczące formularza logowania szczegółowo wyjaśniają zalety tego podejścia.

Selektor :invalid wskazuje, że wartość wejściowa jest nieprawidłowa. (użyjesz go później w tym ćwiczeniu).

Usługa porównywania cen jest tworzona z myślą o urządzeniach mobilnych:

  • Domyślny kod CSS jest przeznaczony do widocznych obszarów o szerokości mniejszej niż 400px.
  • Zapytania multimedialne służą do zastępowania ustawień domyślnych w przypadku widocznych obszarów o szerokości co najmniej 400px, a potem w przypadku widocznych obszarów o szerokości co najmniej 500px. Powinna ona dobrze działać na mniejszych telefonach, urządzeniach mobilnych z większymi ekranami oraz na komputerach.

Podczas tworzenia aplikacji internetowych należy przetestować je na różnych urządzeniach i w różnych rozmiarach widocznego obszaru. Szczególnie dotyczy to formularzy, bo jeden niewielki błąd może sprawić, że będą bezużyteczne. Zawsze dostosuj punkty graniczne CSS, aby mieć pewność, że będą one dobrze działać z Twoim treściami i urządzeniami docelowymi.

  • Czy cały formularz jest widoczny?
  • Czy dane wejściowe formularza są wystarczająco duże?
  • Czy cały tekst jest czytelny?
  • Czy zauważyłeś/zauważyłaś jakieś różnice między korzystaniem z prawdziwego urządzenia mobilnego a wyświetlaniem formularza w trybie urządzenia w Narzędziach deweloperskich w Chrome?
  • Czy musisz dostosowywać punkty graniczne?

Formularz możesz przetestować na różnych urządzeniach na kilka sposobów:

Krok 3. Dodaj atrybuty, które ułatwią użytkownikom wprowadzanie danych

Włącz przeglądarkę, aby zapisywać i automatycznie uzupełniać wartości wejściowe oraz zapewnić dostęp do wbudowanych funkcji płatności i walidacji.

Dodaj atrybuty do formularza w pliku index.html, aby wyglądał tak:

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label for="cc-number">Card number</label>
    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
  </section>

  <section>
    <label for="cc-name">Name on card</label>
    <input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label for="cc-exp">Expiry date</label>
      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div>
      <label for="cc-csc">Security code</label>
      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
      <div class="explanation">Back of card, last 3 digits</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

Ponownie otwórz aplikację i kliknij pole Numer karty. W zależności od urządzenia i platformy może pojawić się wybór form płatności zapisanych w przeglądarce, jak na poniższym obrazku.

2 zrzuty ekranu przedstawiające formularz płatności w Chrome na telefonie z Androidem. W jednym widać wbudowany selektor kart płatniczych w przeglądarce, a drugi – automatycznie uzupełnione wartości zastępczych kart płatniczych.
Wbudowany w przeglądarkę system płatności i autouzupełnianie.

Po wybraniu formy płatności i wpisaniu kodu zabezpieczającego przeglądarka automatycznie wypełnia formularz za pomocą wartości karty płatniczej autocomplete dodanych do formularza:

  • cc-number
  • cc-name
  • cc-exp
  • cc-csc

Wiele przeglądarek sprawdza i potwierdza ważność numerów kart kredytowych oraz kodów bezpieczeństwa.

Na urządzeniu mobilnym zauważysz też, że gdy tylko klikniesz pole Numer karty, pojawi się klawiatura numeryczna. Wynika to z tego, że korzystasz z usługi inputmode="numeric". W polach liczbowych ułatwia to wpisywanie liczb, a wpisywanie znaków niebędących cyframi jest niemożliwe. Pozwala to też użytkownikom zapamiętywać typ wprowadzanych danych.

Bardzo ważne jest, aby w formularzach płatności prawidłowo dodać wszystkie dostępne wartości autocomplete. Często zdarza się, że witryny pomijają wartość autocomplete w polu daty ważności karty i innych pól. Jeśli jedna wartość autofill jest nieprawidłowa lub brakuje jej, użytkownicy będą musieli wyjąć kartę, aby ręcznie wpisać jej dane, co może spowodować utratę sprzedaży. Jeśli autouzupełnianie w formularzach płatności nie działa prawidłowo, użytkownicy mogą też zdecydować się na zapisanie danych karty płatniczej na telefonie lub komputerze, co jest bardzo niebezpieczne.

Spróbuj przesłać formularz płatności z pustym polem. Przeglądarka prosi o uzupełnienie brakujących danych. Teraz dodaj literę do wartości w polu Numer karty i spróbuj przesłać formularz. Przeglądarka ostrzega, że wartość jest nieprawidłowa. Dzieje się tak, ponieważ do określenia prawidłowych wartości w polu użyto atrybutu pattern. To samo dotyczy tagów maxlength i innych ograniczeń weryfikacji. Nie jest wymagany kod JavaScript.

Formularz płatności powinien teraz wyglądać tak:

  • Spróbuj usunąć wartości autocomplete i wypełnić formularz płatności. Z jakimi trudnościami się spotykasz?
  • Wypróbuj formularze płatności w sklepach internetowych. Zastanów się, co działa dobrze, a co nie. Czy są jakieś typowe problemy lub sprawdzone metody, z których warto skorzystać?

Krok 4. Po przesłaniu formularza wyłącz przycisk płatności

Rozważ wyłączenie przycisku przesyłania, gdy użytkownik kliknie go, szczególnie wtedy, gdy dokonuje płatności. Wielu użytkowników wielokrotnie klika przyciski, nawet jeśli działają one prawidłowo. Może to powodować problemy z przetwarzaniem płatności i obciążać serwer.

Dodaj do pliku js/main.js ten kod JavaScript:

const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');

form.addEventListener('submit', handleFormSubmission);

function handleFormSubmission(event) {
  event.preventDefault();
  if (form.checkValidity() === false) {
    // Handle invalid form data.
  } else {
    completePaymentButton.textContent = 'Making payment...';
    completePaymentButton.disabled = 'true';
    setTimeout(() => {alert('Made payment!');}, 500);
  }
}

Spróbuj przesłać formularz płatności i zobacz, co się stanie.

Oto jak powinien wyglądać Twój kod w tym momencie (z dodanymi komentarzami i funkcją validate()):

  • Zauważ, że kod JavaScript zawiera zakomentowany kod służący do sprawdzania poprawności danych. Ten kod korzysta z interfejsu Constraint Validation API (który jest powszechnie obsługiwany), aby dodać niestandardową weryfikację. Uzyskuje dostęp do wbudowanego interfejsu przeglądarki w celu ustawiania zaznaczenia i wyświetlania promptów. Usuń znacznik komentarza z kodu i wypróbuj go. Musisz ustawić odpowiednie wartości dla parametrów someregex i message oraz wartość dla parametru someField.

  • Jakie dane analityczne i dane z Monitorowania użytkowników musisz monitorować, aby znaleźć sposoby na ulepszenie formularzy?

Wypełniony formularz płatności powinien wyglądać tak:

Co jeszcze

Zapoznaj się z tymi ważnymi funkcjami formularzy, które nie są omawiane w tym CodeLab:

  • Link do dokumentów z warunkami korzystania z usługi i polityką prywatności: wyraźnie określ, jak chronisz dane użytkowników.

  • Styl i marka: upewnij się, że są one zgodne z resztą witryny. Podczas wpisywania imion i nazwisk oraz adresów oraz dokonywania płatności użytkownicy muszą czuć się komfortowo, mając pewność, że wciąż są we właściwym miejscu.

  • Statystyki i monitorowanie rzeczywistych użytkowników: umożliwiają testowanie i monitorowanie wydajności i łatwości obsługi formularza pod kątem rzeczywistych użytkowników.