Ta strona została przetłumaczona przez Cloud Translation API.

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

Sam Dutton

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak stworzyć bezpieczny, łatwo dostępny i łatwy w obsłudze formularz płatności.

Krok 1. Użyj kodu HTML zgodnie z przeznaczeniem

Użyj elementów stworzonych na potrzeby zadania:

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

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

Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.

Spójrz na kod HTML swojego 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>

Elementy <input> dotyczące numeru karty, imienia i nazwiska na karcie, daty ważności i kodu zabezpieczającego Wszystkie zawarte w <section> elementach, a każdy z nich ma etykietę. Przycisk Dokonaj płatności to element HTML <button> W dalszej części tego ćwiczenia w Codelabs dowiesz się, do jakich funkcji przeglądarki możesz uzyskać dostęp za pomocą tych elementów.

Uwaga: elementy <input> nie mają tagów zamykających. Dzieje się tak, ponieważ są to elementy niepuste (puste): same w sobie nie zawierają żadnej treści. Znak „/” na końcu pustego elementu jest opcjonalny: <input> lub <input />.

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

Czy formularz działa wystarczająco dobrze?
Czy jest coś, co można by zmienić, aby działało lepiej?
A co na telefonie?

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

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

Dodany kod HTML jest prawidłowy, ale domyślny styl przeglądarki utrudnia korzystanie z formularza, na urządzeniach mobilnych. Też nie wygląda to dobrze.

Chcesz zadbać o to, aby Twoje formularze dobrze działały na różnych urządzeniach, dostosowując dopełnienie, marginesy rozmiarów czcionek.

Skopiuj cały poniższy kod CSS i wklej go do własnego 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.
font-size i inne wartości są różne w zależności od rozmiaru widocznego obszaru.

Następnie kliknij Wyświetl aplikację, aby zobaczyć formularz z wybranym stylem. Zauważysz również, że ramki zostały zmienione i są używane jako etykiety w formacie display: block;, dzięki czemu można umieszczać je w wierszu, dane wejściowe mogą mieć pełną szerokość. Sprawdzone metody dotyczące formularza logowania bardziej szczegółowo wyjaśnia zalety tego podejścia.

Selektor :invalid wskazuje, kiedy dane wejściowe mają nieprawidłową wartość. (Tego będziesz używać w dalszej części ćwiczenia).

Usługa porównywania cen jest dostosowana do komórek:

Domyślna usługa CSS jest przeznaczona dla widocznych obszarów o szerokości mniejszej niż 400px.
Zapytania o multimedia są służy do zastępowania wartości domyślnych w widocznych obszarach o szerokości co najmniej 400px, a później ponownie dla w widocznych obszarach, o szerokości co najmniej 500px. Ta funkcja sprawdza się w przypadku mniejszych telefonów i urządzeń mobilnych. na komputerach i większych ekranach.

Za każdym razem, gdy tworzysz strony pod kątem internetu, musisz przeprowadzić testy na różnych urządzeniach i o różnych rozmiarach widocznego obszaru. To jest zwłaszcza w przypadku formularzy – jeden niewielki błąd może uniemożliwić ich użycie. Zawsze Punkty przerwania CSS, aby zapewnić, że będą dobrze współdziałać treści i urządzeń docelowych.

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ś(-aś) jakieś różnice między korzystaniem z prawdziwego urządzenia mobilnego a wyświetlaniem formularza w Tryb urządzenia w Narzędziach deweloperskich w Chrome?
Czy trzeba było dostosować punkty przerwania?

Jest kilka sposobów na przetestowanie formularza na różnych urządzeniach:

Używanie trybu urządzenia w Narzędziach deweloperskich w Chrome symulują urządzenia mobilne.
Wyślij adres URL z komputera na telefon.
Użyj usługi takiej jak BrowserStack, aby przetestować w zakresie urządzeń i przeglądarek.

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

Włącz w przeglądarce opcję przechowywania i autouzupełniania wartości wejściowych oraz zapewnić dostęp do bezpiecznych wbudowanych funkcji płatności i weryfikacji.

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>

Wyświetl aplikację jeszcze raz i kliknij pole Numer karty. W zależności od urządzenia platformy, możesz zobaczyć selektor z formami płatności zapisanymi w przeglądarce, takimi jak ta poniżej.

Dwa zrzuty ekranu z formularzem płatności w Chrome na telefonie z Androidem. Jeden z nich pokazuje wbudowany selektor kart płatniczych w przeglądarce. a drugi – automatycznie uzupełnione wartości obiektów zastępczych. — Wbudowany moduł wyboru 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, używając wartości autocomplete karty płatniczej dodane w formularzu:

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

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

Na urządzeniu mobilnym klawiatura numeryczna pojawia się, gdy tylko klikniesz Numer karty. Wynika to z tego, że korzystasz z usługi inputmode="numeric". W przypadku pól liczbowych powoduje to, ułatwia wpisywanie cyfr i utrudnia wpisywanie znaków niebędących cyframi, co zachęca użytkowników do zapamiętania typu wprowadzanych danych.

Dodanie do formularzy płatności wszystkich dostępnych wartości autocomplete jest niezwykle ważne. Jest często pomijają wartość autocomplete dla daty ważności karty i inne . Jeśli jedna wartość autofill jest błędna lub jej brak, użytkownicy muszą pobrać rzeczywistą wartość aby ręcznie wpisać dane karty, możesz stracić szanse na sprzedaż. Jeśli automatycznie uzupełniasz formularze płatności nie działa prawidłowo, użytkownicy mogą też zdecydować się na zapisanie danych karty płatniczej w telefonie lub komputera, który jest bardzo niezabezpieczony.

Spróbuj przesłać formularz płatności z pustym polem. Wyświetla się prośba o uzupełnienie brakującego tekstu w przeglądarce i skalowalnych 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ż atrybut pattern został przez Ciebie użyty do określać prawidłowe wartości pola. To samo działa w przypadku aplikacji maxlength i innych ograniczenia weryfikacji JavaScript nie jest wymagany.

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

Spróbuj usunąć autocomplete wartości i wypełnić formularz płatności. Jakie trudności napotykasz spotkania?
Wypróbuj formy płatności w sklepach internetowych. Zastanów się, co się sprawdza, a co nie. Czy są Jakie są 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, gdy użytkownik kliknie go, szczególnie wtedy, gdy użytkownik dokonuje płatności. Wielu użytkowników wielokrotnie klika przyciski. nawet jeśli działają dobrze. Może to spowodować problemy z przetwarzaniem płatności i zwiększyć 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);
  }
}

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

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

Możesz zauważyć, że JavaScript zawiera komentowany kod do sprawdzania poprawności danych. Ten kod wykorzystuje Constraint Validation API (które jest powszechnie obsługiwane), aby dodać niestandardowe z wbudowanym interfejsem przeglądarki, aby ustawić zaznaczenie i wyświetlać prompty. Usuń komentarz z kodu. wypróbuj ją. Musisz ustawić odpowiednie wartości dla someregex i message oraz ustawić wartość dla someField
Jakie dane analityczne i dane z monitorowania rzeczywistych użytkowników które monitorujesz, aby znaleźć sposoby na ulepszenie tych formularzy?

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

Wypróbuj formularz na różnych urządzeniach. Jakich urządzeń i przeglądarek używasz? kierowanie reklam? Jak można ulepszyć formularz?

Co jeszcze

Rozważ te najważniejsze funkcje formularza, które nie zostały omówione w tym ćwiczeniu z programowania:

Link do Warunków korzystania z usługi i polityki prywatności: wyjaśnij użytkownikom, jak ochrony ich danych.
Styl i marka: zadbaj o to, by pasowały do reszty witryny. Podczas wpisywania nazw i adresów i dokonywania płatności, użytkownicy muszą czuć się komfortowo, mając pewność, że nadal są we właściwym miejscu.
Analytics i monitorowanie rzeczywistych użytkowników: umożliwia testowanie i monitorowanie wydajności i łatwości obsługi projektu formularza pod kątem rzeczywistych użytkowników.