Ć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żywaj 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 Remixuj 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 w obecnej postaci?
  • Czy jest coś, co zmieniłbyś/zmieniłabyś, aby było jeszcze lepiej?
  • A na urządzeniach mobilnych?

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 to dobrze.

Musisz dostosować dopełnienia, marginesy i rozmiary czcionek, aby mieć pewność, że formularze będą dobrze działać na różnych urządzeniach.

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

To dużo kodu CSS. Najważniejsze zmiany dotyczą rozmiarów:

  • Użytkownicy padding i margin zostali dodani do listy danych wejściowych.
  • 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, oraz że pola wejściowe mogą mieć pełną szerokość.display: block; Sprawdzone metody dotyczące formularza logowania zawierają więcej informacji o korzyściach z 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. Jest to szczególnie ważne w przypadku formularzy, ponieważ jeden mały błąd może sprawić, że staną się one nieużyteczne. Zawsze dostosuj punkty graniczne CSS, aby mieć pewność, że będą one dobrze działać z Twoim materiałem i urządzeniami docelowymi.

  • Czy cały formularz jest widoczny?
  • Czy pola 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

Umożliwianie przeglądarce przechowywania i autouzupełniania wartości danych wejściowych oraz zapewnianie dostępu do bezpiecznych wbudowanych funkcji płatności i weryfikacji.

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. Jeden pokazuje wbudowany w przeglądarkę selektor karty płatniczej, a drugi – zastępcze wartości automatycznie wypełnianych pól.
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. Dzieje się tak, ponieważ korzystasz z usługi inputmode="numeric". W przypadku pól numerycznych ułatwia to wpisywanie liczb i uniemożliwia wpisywanie znaków niebędących liczbami, a także przypomina użytkownikom, jakie dane wpisują.

Bardzo ważne jest, aby w formularzach płatności prawidłowo dodać wszystkie dostępne wartości autocomplete. Często zdarza się, że w witrynach brakuje wartości autocomplete dla 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 wyświetla prośbę o uzupełnienie brakujących danych. Teraz dodaj literę do wartości w polu Numer karty i spróbuj przesłać formularz. Przeglądarka wyświetla ostrzeżenie, ż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 tagu maxlength i innych ograniczeń weryfikacji. Nie jest wymagany kod JavaScript.

Formularz płatności powinien 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 istnieją jakieś typowe problemy lub sprawdzone metody, których należy przestrzegać?

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

Rozważ wyłączenie przycisku przesyłania po jego kliknięciu przez użytkownika, zwłaszcza gdy użytkownik 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 używa interfejsu Constraint Validation API (który jest powszechnie obsługiwany) do dodawania niestandardowej walidacji, korzystając z wbudowanego interfejsu przeglądarki do ustawiania fokusa i wyświetlania promptów. Odkomentuj kod i go wypróbuj. Musisz ustawić odpowiednie wartości dla parametrów someregex i message oraz wartość dla parametru someField.

  • Jakie dane analityczne i z monitorowania użytkowników warto śledzić, aby znaleźć sposoby na ulepszenie formularzy?

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

Więcej informacji

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 nazw i adresów oraz dokonywania płatności użytkownicy muszą czuć się komfortowo i mieć pewność, że nadal znajdują się we właściwym miejscu.

  • Statystyki i monitorowanie rzeczywistych użytkowników: umożliwiają testowanie i monitorowanie wydajności oraz użyteczności projektu formularza w realnych warunkach.