Utwórz formularz, który maksymalnie ułatwi użytkownikom wpisywanie danych adresowych na komputerach i urządzeniach mobilnych. Upewnij się, że formularz w pełni wykorzystuje wbudowane funkcje przeglądarki dotyczące autouzupełniania, weryfikacji i ograniczeń wprowadzania danych.
Jak to zrobić?
Poniżej znajdziesz najważniejsze wskazówki dotyczące tworzenia skutecznych formularzy adresowych.
Używanie znaczącego, prawidłowego kodu HTML
Wykorzystaj w pełni elementy i atrybuty stworzone do tworzenia formularzy:
<form>,<input>,<label>i<button>type,autocompleteiinputmode
Umożliwiają one korzystanie z wbudowanych funkcji przeglądarki, poprawiają ułatwienia dostępu i nadają znaczenie znacznikom.
Używanie elementu <label> do oznaczania pól formularza do wprowadzania danych
Aby oznaczyć etykietą <input>, <select> lub <textarea>, użyj <label>. Powiąż etykietę z polem wejściowym, nadając atrybutowi for etykiety tę samą wartość co atrybutowi id pola wejściowego.
Wykorzystaj w pełni atrybuty HTML
Ułatw użytkownikom wprowadzanie danych, używając odpowiedniego atrybutu <type> elementu <input>, aby zapewnić odpowiednią klawiaturę na urządzeniach mobilnych i włączyć podstawową weryfikację wbudowaną w przeglądarkę.
Zawsze używaj type="email" w przypadku adresów e-mail i type="tel" w przypadku numerów telefonów.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
Każdy element <input>, <select> i <textarea> POWINIEN mieć odpowiedni atrybut autocomplete, aby poprawić dostępność i pomóc użytkownikom uniknąć ponownego wprowadzania danych.
Użyteczne przyciski
Używaj <button> w przypadku przycisków. Możesz też użyć elementu <input type="submit">, ale nie używaj elementu div ani innego losowego elementu, który działa jak przycisk. Elementy przycisków zapewniają ułatwienia dostępu, wbudowaną funkcję przesyłania formularzy i można je łatwo stylizować.
Nadaj każdemu przyciskowi przesyłania formularza wartość, która opisuje jego działanie. Na każdym etapie procesu płatności używaj opisowego wezwania do działania, które pokazuje postęp i wyraźnie wskazuje następny krok. Na przykład przycisk przesyłania w formularzu adresu dostawy oznacz etykietą Przejdź do płatności, a nie Dalej czy Zapisz.
W miarę możliwości używaj jednego pola do wpisywania imienia i nazwiska.
Zezwalaj użytkownikom na wpisywanie imienia i nazwiska w jednym polu, chyba że masz uzasadniony powód, aby osobno przechowywać imiona, nazwiska, tytuły lub inne części imienia i nazwiska. Użycie jednego pola na imię i nazwisko upraszcza formularze, umożliwia wycinanie i wklejanie oraz ułatwia autouzupełnianie.
Zezwalaj na nazwy międzynarodowe. Do weryfikacji nie używaj wyrażeń regularnych, które pasują tylko do znaków łacińskich. Opcja „Tylko alfabet łaciński” wyklucza użytkowników, których imiona i nazwiska lub adresy zawierają znaki spoza alfabetu łacińskiego. Zamiast tego zezwól na dopasowywanie liter w standardzie Unicode i upewnij się, że Twój backend bezpiecznie obsługuje standard Unicode zarówno w przypadku danych wejściowych, jak i wyjściowych. Unicode w wyrażeniach regularnych jest dobrze obsługiwany przez nowoczesne przeglądarki.
Zezwalaj na różne formaty adresów.
Podczas tworzenia formularza adresu pamiętaj o różnych formatach adresów, nawet w obrębie jednego kraju. Nie zakładaj, że adresy są „normalne”.
Jeśli to możliwe, użyj jednego elementu <textarea> dla adresu.
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
To najbardziej elastyczna opcja, która obsługuje różne formaty adresów lokalnych i międzynarodowych.
Jeśli Twój model danych wymaga osobnych wierszy adresu, użyj jednego elementu <input> na wiersz z tokenami address-line1, address-line2 (i w razie potrzeby address-line3) autocomplete, aby autouzupełnianie nadal działało. Nie dziel adresu ulicy na pola, które nie mają tych tokenów, i wymagaj tylko pierwszego wiersza.
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
Pomoc w zapobieganiu przypadkowemu pominięciu pól danych przez użytkowników
Dodaj atrybut required do pól obowiązkowych.
<input type="text" id="city" name="city" autocomplete="address-level2" required>
Strategie zastępcze
Autouzupełnianie to progresywne ulepszanie. W przeglądarkach, które nie obsługują autouzupełniania, użytkownicy będą musieli po prostu ręcznie wpisać dane adresowe. Ograniczenia semantyczne HTML (takie jak type, inputmode i required) będą nadal działać prawidłowo jako standardowa weryfikacja formularza.