Ćwiczenia z programowania dotyczące formularzy z myślą o rozwiązywaniu problemów

Sam Dutton

Jak zaprojektować formularz, który będzie działał w przypadku różnych formatów nazw i adresów? Drobne błędy w formularzach irytują użytkowników i mogą sprawić, że opuszczą stronę lub zrezygnują z dokonania zakupu lub rejestracji.

Z tego ćwiczenia z programowania dowiesz się, 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

Rozpoczniesz tę część ćwiczenia z pustym formularzem, tylko nagłówkiem i przyciskiem. Następnie zacznij dodawać dane wejściowe. (CSS i trochę kodu JavaScript są już uwzględnione).

  • Kliknij Remix to Edit (Zmiksuj 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 powtarzalne 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 powoduje przejście do jej danych wejściowych, przez co obiekt jest znacznie większy niż w przypadku samej etykiety, co sprawdza się przy korzystaniu z palców, kciuków i kliknięć myszą. 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. Umieszczenie atrybutu name oznacza też, że dostęp do danych z tego elementu może uzyskać interfejs FormData API.

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

Co się stanie, gdy klikniesz pole 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ł on tak:

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name">
</section>

Załaduj stronę ponownie w Chrome i kliknij pole Nazwa. Jakie widzisz różnice?

Możesz zauważyć subtelną zmianę: w polu autocomplete="name" sugestie są teraz konkretnymi wartościami, które były wcześniej używane w danych wejściowych formularza, w którym też używano parametru autocomplete="name". Przeglądarka nie zgaduje, co może być odpowiednie: masz nad tym kontrolę. Dostępna jest też opcja Zarządzaj... umożliwiająca wyświetlanie i edytowanie nazw i adresów przechowywanych w przeglądarce.

Dwa zrzuty ekranu Chrome na telefonie z Androidem przedstawiające formularz z jedną wartością wejściową oraz wartość autouzupełniania i bez autouzupełniania. Jeden pokazuje interfejs przeglądarki z wartościami sugerowanymi za pomocą heurystyki, a drugi – interfejs z zapisanymi wartościami autouzupełniania.
Interfejs autouzupełniania z odgadniętymi wartościami w porównaniu z autouzupełnianiem.

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 dotyczy to sytuacji, gdy użyjesz wartości \w, która [dozwolone są tylko znaki z alfabetu łacińskiego.

  • required oznacza… wymagane. Przeglądarka nie zezwoli na przesłanie formularza bez danych dla tego pola i wyświetli ostrzeżenie i wyróżni dane wejściowe, jeśli spróbujesz przesłać formularz. Nie potrzeba 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łną listę znajdziesz w uzupeł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>

W tym przypadku pole Kod pocztowy jest opcjonalne, ponieważ wiele krajów nie używa kodów pocztowych. (Global Sourcebook zawiera informacje o formatach adresów w 194 różnych 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 rozliczeniowych. Jak można w jak najprostszy sposób wprowadzać dane, zwłaszcza gdy dwa adresy są takie same? W artykule dołączonym do tego ćwiczenia 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żywaj tylko jednego urządzenia wejściowego: nie dziel numeru na części. Ułatwia to użytkownikom wprowadzanie danych lub kopiowanie i wklejanie, upraszcza walidację i 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 mają dostęp do odpowiedniej klawiatury.
  • 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 to next).
2 zrzuty ekranu z formularzem na Androidzie pokazujące, jak atrybut wejścia enterkeyhint zmienia ikonę przycisku Enter.
Użyj atrybutu enterkeyhint, aby ustawić etykietę przycisku Enter: 'next' i 'done'.

Twój pełny formularz adresowy powinien teraz 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?

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

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 sprawdzać 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 elementami strony użytkownicy wchodzą w interakcję, a z którymi nie?).

  • Gdzie znajdują się Twoi użytkownicy? Jak formatują adres? Jakich nazw używają jako składniki adresu, np. 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ą z nim złe słabe w obsłudze. W przypadku długiej listy elementów najlepiej unikać elementów do wyboru. Standard kodów krajów ISO 3166 wymienia obecnie 249 krajów. Zamiast <select> warto rozważyć inną opcję, np. selektor kraju Baymard Institute.

    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.