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

Sam Dutton

Aby wykonać to ćwiczenia z programowania, otwórz tę zakłócenie w drugiej karcie.

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?

Uwaga: zastanawiasz się czasem, jak usunąć sugestie autouzupełniania w Chrome? * Windows: Shift + delete * Mac: Shift + fn + delete

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.

Interfejs służący do autouzupełniania odgadniętych wartości w przeciwieństwie do autouzupełniania.

.

Uwaga: jeśli dla elementu input, select lub textarea dostępna jest odpowiednia wartość autouzupełniania, użyj jej.

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!

.

Uwaga: to ćwiczenia z programowania nie dotyczą lokalizacji ani internacjonalizacji (😜). W zależności od tego, gdzie znajdują się użytkownicy, musisz wziąć pod uwagę formaty adresu i różne nazwy w komponentach adresu, nawet w tym samym języku: ZIP, pocztowy, Eircode lub PIN. Twoja witryna może być dostosowana do różnych regionów, ale formularz adresowy w tym ćwiczeniu z programowania został zaprojektowany z myślą o elastyczności i powinien działać prawidłowo. dla zakresu adresów.

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.

Uwaga: weź pod uwagę sposób, w jaki wykorzystywane są dane adresowe z formularza. Po co to? Zapoznaj się z wymaganiami dotyczącymi danych i dowiedz się, kto je określa.

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

.

Użyj atrybutu Enterkeyhint, aby ustawić etykietę przycisku Enter: „next” i „Gotowe”.

.

Użycie tagu type="number" powoduje dodanie strzałki w górę i w dół, aby zwiększyć liczbę liczb, co nie ma sensu w przypadku danych takich jak numery telefonów, kart płatniczych czy kont. Zamiast nich należy używać nazwy type="tel" jako numeru telefonu. W przypadku innych liczb użyj type="text" (lub pomiń atrybut, bo domyślna wartość to text) i dodaj inputmode="numeric", by uzyskać klawiaturę numeryczną na urządzeniu mobilnym.

.

Uwaga: czy masz problemy z używaniem jednego wejścia dla numeru telefonu? Czy części numerów telefonów (kraj i numer kierunkowy) przechowujesz oddzielnie? Jeżeli tak, dlaczego?

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:

• Używanie trybu urządzenia w Narzędziach deweloperskich w Chrome symulują urządzenia mobilne.
• Wyślij adres URL z komputera na telefon.
• Użyj usługi takiej jak BrowserStack, aby przetestować w zakresie urządzeń i przeglądarek.

.

Uwaga: zanim zaczniesz tworzyć formularze, dowiedz się, jakie dane są wymagane i czy są one bezwzględnie niezbędne. Nie pytaj o dane, których nie potrzebujesz. Najprostszym sposobem na zmniejszenie złożoności formularzy i zwiększenie prywatności jest usunięcie zbędnych pól. Przechowywanie mniejszej ilości danych zmniejsza też koszty związane z przesyłaniem danych backendu i zmniejsza ryzyko odpowiedzialności.

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.