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

Sam Dutton

Jak zaprojektować formularz, który będzie dobrze działał w przypadku różnych nazw i formatów adresów? Postać młodsza usterki irytują użytkowników i mogą sprawić, że opuszczą stronę lub zrezygnują z dokonania zakupu lub zarejestruj się.

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak utworzyć łatwy w obsłudze i przystępny formularz, który sprawdzi się w przypadku większości użytkowników.

Krok 1. Wykorzystaj w pełni elementy i atrybuty HTML

Rozpoczniesz tę część ćwiczeń z programowania od pustego formularza, tylko nagłówka i przycisku do własnych potrzeb. Następnie zaczniesz dodawać dane wejściowe. (CSS i JavaScript są już included.)

  • Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.

  • 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 wydawać się skomplikowane i powtarzalne w przypadku tylko jednego pola nazwy, ale już ma wiele.

Powiązano obiekt label z wartością input, dopasowując atrybut for atrybutu label do atrybutu input użytkownika name lub id. Kliknięcie etykiety powoduje przejście do obszaru wejściowego, co znacznie zwiększa niż w przypadku danych wejściowych, co sprawdza się w przypadku kliknięć palców i kciuków. Czytniki ekranu informuj o tekście etykiety, gdy etykieta lub dane wejściowe etykiety są zaznaczone.

A co z name="name"? Dane te są powiązane z nazwą (taką jak „nazwa”!) danych wejściowych, które są wysyłane na serwer przy przesyłaniu formularza. Uwzględnienie 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? Zobaczysz autouzupełnianie zapisane przez przeglądarkę i odgadnięcia odpowiednie dla tych danych wejściowych, biorąc pod uwagę 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?

Powinna pojawić się nieznaczna zmiana: dzięki funkcji autocomplete="name" sugestie są teraz bardziej szczegółowe które były wcześniej używane w danych wejściowych formularza, które zawierały też właściwość autocomplete="name". Przeglądarka polega na zgadywaniu, co może być odpowiednie: masz kontrolę. Jest też widoczny przycisk Zarządzaj... wyświetlanie i edytowanie nazw i adresów zapisanych w przeglądarce.

Dwa zrzuty ekranu Chrome na telefonie z Androidem przedstawiające formularz z 1 wprowadzeniem oraz wartość autouzupełniania i bez autouzupełniania. Jedna pokazuje heurystyczne wartości sugestii interfejsu przeglądarki. a drugi – UI, gdy są zapisane wartości autouzupełniania.
Interfejs służący do autouzupełniania odgadniętych wartości w przeciwieństwie do autouzupełniania.
.

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

  • Parametr pattern="[\p{L} \-\.]+" używa wyrażenia regularnego, które zezwala na litery Unicode, i kropki. Oznacza to, że imiona takie jak Françoise lub Jörg nie są klasyfikowane jako „nieprawidłowa”. Nie dotyczy to sytuacji, gdy używasz wartości \w, która [dopuszcza tylko znaki z alfabet łaciński.

  • required oznacza... wymagane! Przeglądarka nie zezwoli na przesłanie formularza bez danych: w tym polu. Gdy spróbujesz przesłać dane wejściowe, zobaczysz ostrzeżenie i wyróżnisz. Bez dodatkowego kodu wymagane!

.

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. Zobaczysz ostrzeżenie o wbudowanych funkcjach przeglądarki: puste pole wymagane i zaznaczenie na nim ustawienia.

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 wprowadzania adresów. Doskonale sprawdza się wycinanie i wklejanie.

Należy unikać dzielenia formularza adresowego na elementy takie jak nazwa ulicy i numer, chyba że niezbędne. Nie zmuszaj użytkowników do wpisania adresu w polach, które nie mają sensu.

Teraz dodaj pola Kod pocztowy oraz Kraj lub region. Dla uproszczenia uwzględnionych tu jest tylko pierwszych pięć 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. (W witrynie Global Sourcebook znajdziesz informacje na temat formaty adresów dla 194 różnych krajów, w tym przykładowe adresy). etykietę Kraj lub jest używany region zamiast Kraju, ponieważ niektóre opcje z pełnej listy (takie jak Wielka Brytania) nie są pojedynczym krajem (mimo wartości autocomplete).

Krok 4. Zapewnij klientom łatwe wpisywanie adresów dostawy i adresów rozliczeniowych

Masz wysoce funkcjonalny formularz adresowy, ale co, jeśli witryna wymaga więcej niż jednego na przykład na potrzeby wysyłki i płatności. Zaktualizuj formularz, aby umożliwić klientom wstęp adresu dostawy i adresu rozliczeniowego. Jak sprawić, aby wprowadzanie danych było szybkie i łatwe, zwłaszcza jeśli adresy są takie same? W artykule dołączonym do tego ćwiczenia z programowania metod obsługi wielu adresów. Niezależnie od tego, co zrobisz, pamiętaj o użyciu prawidłowych wartości atrybutu autocomplete.

Krok 5. Dodaj pole numeru telefonu

Aby dodać 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. Dzięki temu użytkownicy przez użytkowników wpisywania danych lub kopiowania i wklejania, ułatwia weryfikację i umożliwia przeglądarkom korzystanie z autouzupełniania.

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

  • Dzięki type="tel" użytkownicy urządzeń mobilnych mają dostęp do odpowiedniej klawiatury.
  • enterkeyhint="done" ustawia etykietę klawisza Enter na klawiaturze mobilnej, aby pokazać, że jest to ostatnia i można już przesłać formularz (domyślnie next).
.
Dwa zrzuty ekranu formularza na Androidzie, na których widać, jak atrybut danych wejściowych Enterkeyhint zmienia ikonę przycisku Enter.
Użyj atrybutu Enterkeyhint, aby ustawić etykietę przycisku Enter: „next” i „Gotowe”.
. .

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 chcesz kierować reklamy? Jak ulepszyć formularz?

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

.

Co jeszcze

  • Analytics i monitorowanie rzeczywistych użytkowników: umożliwia testowanie i monitorowanie wydajności i łatwości obsługi projektu formularza pod kątem rzeczywistych użytkowników; i sprawdzać, czy zmiany okażą się skuteczne. Sprawdzaj wydajność wczytywania i inne wskaźniki internetowe, jak i statystyki strony (jaka część użytkowników rezygnuje z formularza adresowego, nie kończąc ? ile czasu użytkownicy spędzają na stronach formularza adresowego?) i analizy interakcji (którą stronę, z którymi użytkownicy wchodzą w interakcje).

  • Gdzie znajdują się Twoi użytkownicy? Jak formatuje adres? Jakich nazw używają w adresach? takie jak kod pocztowy czy kod pocztowy? Kompulsywny przewodnik Franka po adresach pocztowych udostępnia przydatne linki i szczegółowe 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. Najlepiej unikać wybranych elementów w przypadku długiej listy elementów. a standard kodu kraju ISO 3166 to już 249 krajów. Zamiast <select> możesz rozważyć inną możliwość, taką jak Selektor kraju w Baymard Institute

    Czy dasz radę zaprojektować lepszy selektor list z dużą liczbą elementów? Jak możesz zadbać o to, aby projekt był na różnych urządzeniach i platformach? (Element <select> nie działa dobrze w przypadku produktów, ale można ich używać w praktycznie wszystkich przeglądarkach i na urządzeniach wspomagających.

    Post na blogu <input type="kraj" /> omawia złożoność standaryzacji selektora kraju. Lokalizację nazw krajów można również problematyczne. Listy krajów zawierają narzędzie do: pobieranie kodów krajów i nazw w wielu językach i w wielu formatach.