Jak zaprojektować formularz, który będzie działał w przypadku różnych formatów nazw i adresów? Drobne błędy w formularzu mogą drażnić użytkowników i sprawić, że opuszczą Twoją witrynę lub zrezygnują z zakupu lub rejestracji.
W tym ćwiczeniu z programowania pokazujemy, jak utworzyć prostą i przystępną formę, która będzie odpowiednia dla większości użytkowników.
Krok 1. Wykorzystaj elementy i atrybuty HTML
W tej części tego Codelab zaczniesz od pustego formularza, który zawiera tylko nagłówek i przycisk. Następnie zacznij dodawać dane wejściowe. (CSS i trochę kodu JavaScript są już uwzględnione).
Kliknij Remixuj do edycji, aby umożliwić edycję projektu.
Dodaj pole nazwy do elementu
<form>
za pomocą tego kodu:
<section>
<label for="name">Name</label>
<input id="name" name="name">
</section>
Może to wyglądać na skomplikowane i powtarzające się w przypadku jednego pola nazwy, ale już teraz daje wiele możliwości.
Powiązałeś/powiązałaś label
z input
, dopasowując atrybut label
for
do atrybutu input
name
lub id
. Kliknięcie etykiety spowoduje przeniesienie punktu skupienia na jej pole wejścia, co spowoduje, że pole będzie znacznie większe niż samo pole wejścia. Jest to wygodne dla palców, kciuka i kliknięć myszką. Czytniki ekranu odczytują tekst etykiety, gdy etykieta lub pole tekstowe etykiety zostanie wybrane.
A name="name"
? To jest nazwa (w tym przypadku „name”) powiązana z danymi z tego pola, które są wysyłane na serwer po przesłaniu formularza. Uwzględnienie atrybutu name
oznacza też, że interfejs FormData API ma dostęp do danych z tego elementu.
Krok 2. Dodaj atrybuty, które ułatwią użytkownikom wprowadzanie danych
Co się dzieje, gdy klikniesz lub dotkniesz pola Nazwa w Chrome? Powinny się wyświetlić sugestie autouzupełniania, które przeglądarka przechowuje, oraz dopasowane do tego tekstu domysły, biorąc pod uwagę wartości name
i id
.
Teraz dodaj autocomplete="name"
do kodu wejściowego, aby wyglądał tak:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name">
</section>
Ponownie załaduj stronę w Chrome i kliknij lub dotknij pola Nazwa. Jakie widzisz różnice?
Zauważysz niewielką zmianę: w przypadku autocomplete="name"
sugestie są teraz konkretnymi wartościami, które były używane wcześniej w danych formularza, które również miały autocomplete="name"
. Przeglądarka nie zgaduje, co może być odpowiednie: masz nad tym kontrolę. Zobaczysz też opcję Zarządzaj…, która umożliwia wyświetlanie i edytowanie nazw i adresów przechowywanych przez przeglądarkę.
Teraz dodaj atrybuty weryfikacji ograniczeń
maxlength
, pattern
i required
, aby Twój kod wejściowy wyglądał tak:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name"
maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>
maxlength="100"
oznacza, że przeglądarka nie zezwala na wprowadzanie danych dłuższych niż 100 znaków.pattern="[\p{L} \-\.]+"
używa wyrażenia regularnego, które zezwala na znaki literowe Unicode, łączniki i kropki. Oznacza to, że nazwy takie jak Françoise czy Jörg nie są klasyfikowane jako „nieprawidłowe”. Nie jest to jednak możliwe, jeśli użyjesz wartości\w
, która zezwala tylko na znaki z alfabetu łacińskiego.required
oznacza… wymagane. Przeglądarka nie pozwoli na przesłanie formularza bez danych w tym polu. Jeśli spróbujesz go przesłać, wyświetli ostrzeżenie i podświetli dane. Nie musisz pisać dodatkowego kodu.
Aby sprawdzić, jak formularz działa z tymi atrybutami i bez nich, spróbuj wpisać dane:
- Spróbuj wpisać wartości, które nie pasują do atrybutu
pattern
. - Spróbuj przesłać formularz z pustym tekstem. Zobaczysz ostrzeżenie o pustym wymaganym polu i ustawienie fokusa na tym polu.
Krok 3. Dodaj do formularza elastyczne pole adresu
Aby dodać pole adresu, dodaj do formularza ten kod:
<section>
<label for="address">Address</label>
<textarea id="address" name="address" autocomplete="address"
maxlength="300" required></textarea>
</section>
textarea
to najbardziej elastyczny sposób na wpisanie adresu przez użytkowników. Jest też bardzo przydatny do kopiowania i wklejania.
Nie należy dzielić formularza adresu na elementy, takie jak nazwa ulicy i numer domu, chyba że jest to naprawdę konieczne. Nie zmuszaj użytkowników do wpisywania adresu w polach, które nie mają sensu.
Teraz dodaj pola kod pocztowy i kraj lub region. Ze względu na prostotę uwzględniono tutaj tylko 5 pierwszych krajów. Pełna lista znajduje się w wypełnionym formularzu adresowym.
<section>
<label for="postal-code">ZIP or postal code (optional)</label>
<input id="postal-code" name="postal-code"
autocomplete="postal-code" maxlength="20">
</section>
<section id="country-region">
<label for="">Country or region</label>
<select id="country" name="country" autocomplete="country"
required>
<option selected value="SPACER"> </option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
</select>
</section>
Kod pocztowy jest opcjonalny, ponieważ wiele krajów nie używa kodów pocztowych.
(Global Sourcebook zawiera informacje o formatach adresów w 194 krajach, w tym przykładowe adresy). Zamiast etykiety Kraj używana jest etykieta Kraj lub region, ponieważ niektóre opcje z pełnej listy (np. Wielka Brytania) nie są pojedynczymi krajami (pomimo wartości autocomplete
).
Krok 4. Umożliw klientom łatwe wpisywanie adresów dostawy i fakturowania
Utworzyłeś/-aś bardzo funkcjonalny formularz adresu, ale co, jeśli Twoja witryna wymaga więcej niż jednego adresu, np. do wysyłki i rozliczenia? Spróbuj zaktualizować formularz, aby umożliwić klientom podanie adresów dostawy i rozliczeniowego. Jak można w jak najprostszy sposób wprowadzać dane, zwłaszcza gdy dwa adresy są takie same? W artykule towarzyszącym temu ćwiczeniu znajdziesz techniki obsługi wielu adresów.
Pamiętaj, aby używać prawidłowych wartości autocomplete
.
Krok 5. Dodaj pole numeru telefonu
Aby dodać pole na numer telefonu, dodaj do formularza ten kod:
<section>
<label for="tel">Telephone</label>
<input id="tel" name="tel" autocomplete="tel" type="tel"
maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
required>
</section>
W przypadku numerów telefonów użyj jednego pola wejściowego: nie dziel numeru na części. Ułatwia to użytkownikom wprowadzanie danych lub kopiowanie i wklejanie, upraszcza walidację oraz umożliwia przeglądarkom automatyczne wypełnianie pól.
Istnieją 2 atrybuty, które mogą ułatwić użytkownikom wpisywanie numeru telefonu:
type="tel"
zapewnia, że użytkownicy mobilni otrzymają odpowiednią klawiaturę.enterkeyhint="done"
ustawia etykietę klawisza Enter na klawiaturze mobilnej, aby pokazać, że to jest ostatnie pole i że formularz można teraz przesłać (domyślnie jest tonext
).
Twój formularz adresu powinien wyglądać tak:
- Wypróbuj formularz na różnych urządzeniach. Na jakie urządzenia i przeglądarki kierujesz reklamy? Jak można ulepszyć ten formularz?
Formularz możesz przetestować na różnych urządzeniach na kilka sposobów:
- Użyj trybu urządzenia w Narzędziach deweloperskich Chrome, aby symulować urządzenia mobilne.
- Wyślij adres URL z komputera na telefon.
- Użyj usługi takiej jak BrowserStack, aby przetestować aplikację na różnych urządzeniach i w różnych przeglądarkach.
Więcej informacji
Analytics i monitorowanie rzeczywistych użytkowników: umożliwiają testowanie i monitorowanie wydajności oraz użyteczności projektu formularza w realnych warunkach oraz sprawdzanie, czy wprowadzone zmiany są skuteczne. Musisz monitorować wydajność wczytywania i inne wskaźniki Web Vitals, a także statystyki stron (ile procent użytkowników opuszcza formularz adresowy bez jego wypełnienia? ile czasu użytkownicy spędzają na stronach formularza adresowego?) oraz statystyki interakcji (z którymi komponentami strony użytkownicy wchodzą w interakcję, a z którymi nie?).
Gdzie znajdują się Twoi użytkownicy? Jak formatują adres? Jakie nazwy są używane w przypadku elementów adresu, takich jak kod pocztowy? Frank's Compulsive Guide to Postal Addresses zawiera przydatne linki i obszerne wskazówki dotyczące formatów adresów w ponad 200 krajach.
Selektory krajów są znane z niskiej użyteczności. W przypadku długiej listy elementów najlepiej unikać elementów wybranych. Standard kodów krajów ISO 3166 wymienia obecnie 249 krajów. Zamiast
<select>
możesz rozważyć użycie selektora krajów Instytutu Baymard.Czy można zaprojektować lepszy selektor dla list z wieloma elementami? Jak zapewnić dostępność projektu na różnych urządzeniach i platformach? (element
<select>
nie sprawdza się dobrze w przypadku dużej liczby elementów, ale przynajmniej można go używać w praktycznie wszystkich przeglądarkach i urządzeniach wspomagających).W poście na blogu <input type="country" /> omawiamy złożoność standaryzacji selektora kraju. Lokalizacja nazw krajów może być również problematyczna. Na stronie Listy krajów znajdziesz narzędzie do pobierania kodów i nazwy krajów w różnych językach i formatach.