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

Sam Dutton

Z tego ćwiczenia w programie dowiesz się, jak stworzyć bezpieczny, dostępny i łatwy w obsłudze formularz płatności.

Krok 1. Użyj kodu HTML zgodnie z oczekiwaniami

Użyj elementów stworzonych na potrzeby danego zadania:

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

Jak widzisz, te elementy włączają wbudowane funkcje przeglądarki, poprawiają dostępność i nadają znaczenie znacznikom.

  • Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.

Obejrzyj kod HTML swojego formularza w języku: 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>

Elementy (<input>) dotyczące numeru karty, imienia i nazwiska na karcie, daty ważności i kodu zabezpieczającego. Zawierają się one w elementach <section>, a każdy z nich ma etykietę. Przycisk Dokonaj płatności to kod HTML <button>. W dalszej części tego ćwiczenia w programie poznasz funkcje przeglądarki, do których możesz uzyskać dostęp dzięki tym elementom.

Kliknij Wyświetl aplikację, aby wyświetlić podgląd formularza płatności.

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

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

Krok 2. Zaprojektuj aplikację 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. To też nie wygląda najlepiej.

Musisz zadbać o to, by Twoje formularze działały dobrze na różnych urządzeniach, dostosowując dopełnienie, marginesy i rozmiary czcionek.

Skopiuj cały poniższy kod CSS i wklej go do własnego pliku css/main.css.

Ale to sporo! Najważniejsze kwestie, o których trzeba pamiętać o zmianach rozmiarów:

  • Obiekty padding i margin zostały dodane do danych wejściowych.
  • font-size i inne wartości różnią się w zależności od rozmiaru widocznego obszaru.

Następnie kliknij Wyświetl aplikację, aby zobaczyć formularz ze stylem. Zauważysz też, że ramki zostały poprawione, a display: block; jest używany dla etykiet, dzięki czemu są one umieszczone w linii, a dane wejściowe mogą mieć pełną szerokość. W sekcji Sprawdzone metody korzystania z formularza logowania znajdziesz szczegółowe informacje o zaletach tego podejścia.

Selektor :invalid służy do wskazywania, kiedy dane wejściowe mają nieprawidłową wartość. Użyjesz go później w ćwiczeniach z programowania.

Usługa porównywania cen jest dostosowana do urządzeń mobilnych:

  • Domyślny CSS działa w widocznych obszarach o szerokości mniejszej niż 400px.
  • Zapytania o multimedia służą do zastępowania wartości domyślnych w przypadku widocznych obszarów, które mają co najmniej 400px szerokości, a następnie w przypadku widocznego obszaru o szerokości co najmniej 500px. Powinno to sprawdzić się na mniejszych telefonach i urządzeniach mobilnych z większymi ekranami oraz na komputerach.

Za każdym razem, gdy tworzysz strony internetowe, musisz przeprowadzać testy na różnych urządzeniach i o różnych rozmiarach widocznego obszaru. Dotyczy to zwłaszcza formularzy, ponieważ jedna mała usterka może je sprawić, że będą bezużyteczne. Zawsze koryguj punkty przerwania CSS, by mieć pewność, że dobrze współgrają z Twoimi treściami i urządzeniami docelowymi.

  • Czy cały formularz jest widoczny?
  • Czy dane w formularzu są wystarczająco duże?
  • Czy cały tekst jest czytelny?
  • Czy widzisz jakieś różnice między używaniem prawdziwego urządzenia mobilnego a wyświetlaniem formularza w trybie urządzenia w Narzędziach deweloperskich w Chrome?
  • Czy trzeba było dostosować punkty przerwania?

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

Krok 3. Dodaj atrybuty, aby ułatwić użytkownikom wpisywanie danych

Zezwól przeglądarce na zapisywanie i autouzupełnianie wartości wejściowych oraz zapewnij dostęp do bezpiecznych wbudowanych funkcji płatności i walidacji.

Dodaj atrybuty do formularza w pliku index.html, aby wyglądał on 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 wyświetl aplikację i kliknij pole Numer karty. W zależności od urządzenia i platformy może pojawić się selektor z formami płatności zapisanymi w przeglądarce, tak jak pokazano poniżej.

Dwa zrzuty ekranu z formularzem płatności w Chrome na telefonie z Androidem. Jedna z nich ma wbudowany selektor kart płatniczych w przeglądarce, a druga pokazuje zastępcze automatycznie uzupełnione wartości.
Wbudowany selektor płatności i autouzupełnianie w przeglądarce.

Gdy wybierzesz formę płatności i wpiszesz kod zabezpieczający, przeglądarka automatycznie uzupełni formularz, korzystając z wartości autocomplete karty płatniczej dodanych w formularzu:

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

Wiele przeglądarek sprawdza i potwierdza też poprawność numerów kart kredytowych i kodów zabezpieczających.

Na urządzeniu mobilnym po kliknięciu pola Numer karty pojawi się klawiatura numeryczna. To dlatego, że używasz inputmode="numeric". W przypadku pól liczbowych ułatwia to wpisywanie liczb i uniemożliwia wpisywanie znaków innych niż cyfry, a także zachęca użytkowników do zapamiętania rodzaju wprowadzanych danych.

Bardzo ważne jest prawidłowe dodanie do formularzy płatności wszystkich dostępnych wartości atrybutu autocomplete. Witryny często pomijają autocomplete w przypadku daty ważności karty i innych pól. Jeśli brakuje jednej wartości autofill lub jest ona błędna, użytkownicy będą musieli pobrać dane swojej karty i ręcznie wpisać dane karty, co może spowodować utratę udziału w promocji. Jeśli autouzupełnianie w formularzach płatności nie działa prawidłowo, użytkownicy mogą też zapisywać dane kart płatniczych na telefonie lub komputerze, co nie jest bezpieczne.

Prześlij 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 pola użyto atrybutu pattern. To samo działa w przypadku maxlength i innych ograniczeń weryfikacji. Nie jest wymagany JavaScript.

Twój 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 masz do czynienia?
  • Wypróbuj formy płatności w sklepach internetowych. Zastanów się, co działa dobrze, a co nie. Czy występują jakieś typowe problemy lub sprawdzone metody, które warto zastosować?

Krok 4. Wyłącz przycisk płatności po przesłaniu formularza

Rozważ wyłączenie przycisku przesyłania po jego kliknięciu przez użytkownika – zwłaszcza jeśli dokonuje on płatności. Wielu użytkowników wielokrotnie klika lub klika przyciski, nawet jeśli te funkcje działają normalnie. Może to powodować problemy z przetwarzaniem płatności i zwiększać obciążenie serwera.

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);
  }
}

Prześlij formę płatności i zobacz, co się stanie.

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

  • Zwróć uwagę, że JavaScript zawiera komentowany kod do sprawdzania poprawności danych. Ten kod wykorzystuje interfejs 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 spróbuj. Ustaw odpowiednie wartości dla właściwości someregex i message oraz ustaw wartość właściwości someField.

  • Jakie dane analityczne i dane z monitorowania użytkowników będziesz monitorować, by znaleźć sposoby na ulepszenie formularzy?

Twój pełny formularz płatności powinien teraz wyglądać tak:

Co dalej

Weź pod uwagę te najważniejsze funkcje formularza, których nie omawiamy w tym ćwiczeniu w programie:

  • Link do dokumentów z Warunkami korzystania z usługi i polityką prywatności: wyjaśnij użytkownikom, jak chronisz ich dane.

  • Styl i elementy marki: zadbaj o to, aby pasowały do reszty witryny. Podczas wpisywania imion i nazwisk oraz adresów oraz dokonywania płatności użytkownicy muszą czuć się komfortowo i mieć pewność, że nadal są we właściwym miejscu.

  • Analytics i monitorowanie rzeczywistych użytkowników: możesz testować i monitorować wydajność i użyteczność projektu formularza.