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.
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
imargin
. 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 najmniej500px
. 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.](https://web.dev/static/articles/codelab-payment-form-best-practices/image/two-screenshots-a-paymen-0c2e6e2be4f9d.png?authuser=4&hl=pl)
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
imessage
oraz ustawić wartość dlasomeField
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.