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

Sam Dutton

Jak zaprojektować formularz, który będzie dobrze sprawdzał się w przypadku różnych imion i nazwisk oraz formatów adresów? Drobne błędy irytują użytkowników i mogą spowodować, że opuściją witrynę albo zrezygnują z dokonania zakupu lub rejestracji.

Z tego ćwiczenia w programie dowiesz się, jak stworzyć łatwy w obsłudze i przystępny formularz, który sprawdzi się w przypadku większości użytkowników.

Krok 1. Wykorzystaj jak najlepiej elementy i atrybuty HTML

Tę część ćwiczenia z programowania zaczniesz od pustego formularza, własnego nagłówka i przycisku. Potem zaczniesz dodawać dane wejściowe. (CSS i trochę JavaScriptu są już dostępne).

  • Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.

  • Dodaj pole nazwy do elementu <form> za pomocą tego kodu:

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

Może się to wydawać skomplikowane i powtarzalne w przypadku tylko jednego pola nazwy, ale już działa.

Powiązano label z input, dopasowując atrybut for zasobu label do parametru name lub id parametru input. Dotknięcie etykiety powoduje przeniesienie zaznaczenia na dane wejściowe, dzięki czemu cel jest znacznie większy niż w przypadku samych danych wejściowych – to dobre rozwiązanie w przypadku kliknięć palcami, kciukami i myszką. Czytniki ekranu odczytują tekst etykiety, gdy etykieta lub dane wejściowe etykiety zostaną zaznaczone.

A co z name="name"? Jest to nazwa (taką samą jak nazwa) powiązana z danymi z tych danych wejściowych, które są wysyłane na serwer po przesłaniu formularza. Zastosowanie atrybutu name oznacza też, że dostęp do danych z tego elementu będzie możliwy za pomocą interfejsu FormData API.

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

Co się stanie, gdy klikniesz pole Nazwa w Chrome? Powinny wyświetlić się sugestie autouzupełniania zapisane przez przeglądarkę, a przypadki, które przypuszczają, są odpowiednie dla tych danych wejściowych, biorąc pod uwagę ich 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>

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

Warto zauważyć nieznaczną zmianę: autocomplete="name" sprawia, że sugestie są teraz konkretnymi wartościami, które były wcześniej używane w danych wejściowych formularza z atrybutem autocomplete="name". Przeglądarka nie zgaduje, co może być odpowiednie: to Ty masz kontrolę. Będzie też widoczna opcja Zarządzaj..., która pozwala wyświetlać i edytować nazwy oraz adresy przechowywane w przeglądarce.

Dwa zrzuty ekranu Chrome na telefonie z Androidem przedstawiające formularz z jednym polem do wprowadzania danych oraz z wartością autouzupełniania i bez niej. Jedna z nich pokazuje heurystyczne wartości sugestii w interfejsie przeglądarki, a druga pokazuje interfejs, gdy zapisane są wartości autouzupełniania.
Interfejs autouzupełniania przy użyciu odgadniętych wartości w porównaniu z autouzupełnianiem.

Teraz dodaj atrybuty weryfikacji ograniczeń maxlength, pattern i required, aby 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 pozwala na wpisanie danych dłuższych niż 100 znaków.

  • pattern="[\p{L} \-\.]+" używa wyrażenia regularnego, które zezwala na znaki liter Unicode, łączniki i kropki (pełne kropki). Oznacza to, że imiona takie jak Françoise czy Jörg nie są klasyfikowane jako „nieprawidłowe”. Inaczej jest w przypadku użycia wartości \w, która [pozwala na używanie tylko znaków alfabetu łacińskiego.

  • required oznacza... wymagane! Przeglądarka nie zezwoli na przesłanie formularza bez danych w tym polu i wyświetli ostrzeżenie i podświetli dane wejściowe, jeśli spróbujesz je przesłać. Nie potrzebujesz 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 pustymi danymi wejściowymi. W wbudowanej przeglądarce zobaczysz ostrzeżenie o pustym wymaganym polu i zaznaczeniu go.

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 wpisywania adresu przez użytkowników, który doskonale nadaje się do wycinania i wklejania.

Staraj się nie dzielić formularza adresowego na takie składniki, jak nazwa ulicy i numer, chyba że naprawdę jest to 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. Dla uproszczenia uwzględniamy tylko pierwsze 5 krajów. Pełną listę znajdziesz w wypełnionym formularzu adresu.

<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>

Zauważysz, że pole Kod pocztowy jest opcjonalne, ponieważ w wielu krajach nie używa się żadnych kodów pocztowych. Artykuł Global Sourcebook zawiera informacje o formatach adresów w 194 krajach, a także o przykładowych adresach. Używana jest etykieta Kraj lub region zamiast Country, ponieważ niektóre opcje z pełnej listy (np. Wielka Brytania) nie są pojedynczymi krajami (pomimo wartości autocomplete).

Krok 4. Pozwól klientom łatwo wprowadzać adresy dostawy i adresy rozliczeniowe

Masz już bardzo funkcjonalny formularz adresowy, ale co zrobić, jeśli Twoja witryna wymaga na przykład więcej niż jednego adresu, na przykład na potrzeby dostawy i rozliczeń? Zaktualizuj formularz tak, by klienci mogli podać adresy dostawy i rozliczeniowe. Co zrobić, aby wprowadzanie danych było szybsze i łatwiejsze, zwłaszcza wtedy, gdy oba adresy są takie same? W tym artykule znajdziesz informacje o technikach obsługi wielu adresów. Niezależnie od tego, co będziesz robić, pamiętaj, aby używać prawidłowych wartości atrybutu autocomplete.

Krok 5. Dodaj pole numeru telefonu

Aby wpisać 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 numeru telefonu wpisz tylko jedną wartość: nie dziel numeru na części. Ułatwia to użytkownikom wpisywanie danych lub ich kopiowanie i wklejanie, a także upraszcza weryfikację i umożliwia przeglądarkom autouzupełnianie.

Istnieją 2 atrybuty, które mogą zwiększyć wygodę użytkowników korzystających z numeru telefonu:

  • type="tel" dba o to, aby użytkownicy urządzeń mobilnych mieli dostęp do właściwej klawiatury.
  • enterkeyhint="done" ustawia etykietę klawisza Enter na klawiaturze mobilnej, aby pokazać, że jest to ostatnie pole i można teraz przesłać formularz (domyślnie jest to next).
Dwa zrzuty ekranu formularza na Androidzie przedstawiające, jak atrybut wprowadzania 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 jakie przeglądarki kierujesz reklamy? Jak można ulepszyć ten formularz?

Formularz możesz przetestować na różnych urządzeniach na kilka sposobów:

Co dalej

  • Analytics i monitorowanie rzeczywistych użytkowników: możesz testować i monitorować wydajność i użyteczność projektu formularza oraz sprawdzić, czy zmiany przynoszą oczekiwane rezultaty. Należy monitorować wydajność wczytywania i inne wskaźniki internetowe, a także statystyki strony (jaka część użytkowników rezygnuje z formularza adresu, nie wypełniając go, ile czasu użytkownicy spędzają na Twoich stronach formularzy?) oraz statystyki interakcji (z którymi komponentami stron korzystają użytkownicy, a z którymi nie?).

  • Gdzie znajdują się Twoi użytkownicy? Jak formatuje swój adres? Jakich nazw używają komponentów adresów, np. kodu pocztowego? Praktyczny przewodnik po adresach pocztowych Franka zawiera przydatne linki i obszerne wskazówki ze szczegółowymi informacjami na temat formatów adresów w ponad 200 krajach.

  • Wybór kraju często jest słabą obsługą. Najlepiej unikać wybierania elementów w przypadku długiej listy produktów, a norma ISO 3166 zawiera obecnie listę 249 krajów. Zamiast <select> możesz skorzystać z innej metody, np. selektora kraju Bard Institute.

    Czy można zaprojektować lepszy selektor dla list z dużą liczbą elementów? Jak zadbasz o dostęp do projektu na różnych urządzeniach i platformach? (Element <select> nie działa dobrze w przypadku wielu elementów, ale można go używać praktycznie we wszystkich przeglądarkach i na urządzeniach wspomagających).

    W poście <input type="country" /> omówiliśmy złożoność standaryzacji selektora krajów. Zlokalizowanie nazw krajów również może sprawiać problemy. Listy krajów zawierają narzędzie do pobierania kodów i nazw krajów w wielu językach i formatach.