Ć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 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ę.

2 zrzuty ekranu z Chrome na telefonie z Androidem przedstawiające formularz z jednym polem tekstowym z wartością autouzupełniania i bez niej 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 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 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 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:

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.