Ćwiczenia z programowania dotyczące formularza rejestracyjnego

Sam Dutton

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak stworzyć bezpieczny, dostępny i łatwy w obsłudze formularz rejestracyjny.

Krok 1. Używaj zrozumiałego kodu HTML

Z tego kroku dowiesz się, jak używać elementów formularzy, aby w pełni wykorzystać funkcje wbudowane w przeglądarkę.

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

Spójrz na kod HTML swojego formularza w index.html. Zobaczysz pola do wprowadzania imienia i nazwiska, adresu e-mail i hasło. Każdy z nich znajduje się w sekcji, a każdy z nich ma etykietę. Przycisk Zarejestruj się to <button>. W dalszej części tego ćwiczenia w programie poznasz specjalne moce wszystkich tych elementów.

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>
    <label>Full name</label>
    <input>
  </section>
  
  <section>
    <label>Email</label>
    <input>
  </section>
  
  <section>
    <label>Password</label>
    <input>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

Kliknij Wyświetl aplikację, aby wyświetlić podgląd formularza rejestracji. Dzięki temu zobaczysz, jak wygląda formularz bez kodu CSS domyślne style przeglądarki.

  • Czy style domyślne wyglądają OK? Co należałoby zmienić, aby formularz wyglądał lepiej?
  • Czy style domyślne działają prawidłowo? Jakie problemy mogą wystąpić podczas korzystania z formularza? Co na komórce? A co z czytnikami ekranu i innymi technologiami wspomagającymi?
  • Kim są Twoi użytkownicy oraz na jakie urządzenia i przeglądarki kierujesz reklamy?

Testowanie formularza

Możesz kupić sporo sprzętu i skonfigurować device Lab, ale są też tańszych i prostszych sposobów testowania formularza na różnych przeglądarkach, platformach i urządzeniach:

Kliknij Wyświetl aplikację, aby wyświetlić podgląd formularza rejestracji.

  • Wypróbuj formularz na różnych urządzeniach w Narzędziach deweloperskich w Chrome w trybie urządzenia.
  • Otwórz formularz na telefonie lub innym urządzeniu. Jakie widzisz różnice?

Krok 2. Dodaj CSS, aby ulepszyć formularz

Kliknij Wyświetl źródło, aby wrócić do kodu źródłowego.

Na razie nie ma w nim nic złego, ale musisz dopilnować, by Twój formularz działał prawidłowo do najróżniejszych odbiorców korzystających z urządzeń mobilnych i komputerów.

W tym kroku dodasz CSS, by ułatwić korzystanie z formularza.

Skopiuj i wklej cały poniższy kod CSS do pliku css/main.css:

Kliknij Wyświetl aplikację, aby zobaczyć stylizowany formularz rejestracji. Następnie kliknij Wyświetl źródło, aby wrócić do css/main.css

  • Czy ta usługa porównywania cen działa na różne przeglądarki i ekrany o różnych rozmiarach?

  • Dostosuj ustawienia padding, margin i font-size pod kątem urządzeń testowych.

  • Usługa porównywania cen jest dostosowana do komórek. Zapytania o multimedia służą do stosowania reguł CSS do widocznych obszarów o szerokości co najmniej 400px, a potem ponownie dla w widocznych obszarach, o szerokości co najmniej 500px. Czy są to punkty przerwania wystarczające? Jak wybrać punkty przerwania dla formularzy?

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

W tym kroku dodajesz atrybuty do elementów wejściowych, aby umożliwić przeglądarce zapisywanie i autouzupełnianie oraz ostrzegać o polach z brakującymi lub nieprawidłowymi danymi.

Zaktualizuj plik index.html, aby kod formularza wyglądał tak:

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>        
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name" 
           pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
           type="email" required>
  </section>
  
  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password" 
           type="password" minlength="8" required>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

Wartości type robią bardzo wiele: * type="password" zasłania wpisywany tekst i włącza przeglądarkę menedżera haseł, by zasugerować silne hasło. * type="email" umożliwia podstawową weryfikację i daje pewność, że użytkownicy urządzeń mobilnych mają dostęp do odpowiedniej klawiatury. Wypróbuj wyrzuć!

Kliknij Wyświetl aplikację, a następnie kliknij etykietę E-mail. Co się dzieje Zaznaczenie przechodzi do e-maila danych wejściowych, ponieważ etykieta ma wartość for pasującą do id w adresie e-mail. Pozostałe etykiety oraz działają tak samo. Czytniki ekranu informują też, że etykieta (lub plik powiązane dane wejściowe). Aby to zrobić, użyj rozszerzenia ChromeVox.

Spróbuj przesłać formularz z pustym polem. Przeglądarka nie może przesłać formularza, a zamiast tego pojawia się prośba o uzupełnienia brakujących danych i ustawić fokus. Dzieje się tak, ponieważ dodałeś atrybut require do wszystkich danych wejściowych. Teraz spróbuj przesłać hasło, które ma mniej niż 8 znaków. Przeglądarka ostrzega, hasło jest za krótkie, dlatego minlength="8" . Ta sama funkcja działa w przypadku pól pattern (używanej do wprowadzania nazwy) i innych ograniczenia weryfikacji. Przeglądarka robi to automatycznie, bez żadnego dodatkowego kodu.

Użycie wartości autocomplete name dla parametru Imię i nazwisko ma sens, ale co z danymi inne dane wejściowe? * autocomplete="username" w przypadku pola E-mail oznacza, że menedżer haseł przeglądarki będzie zapisywać a adres e-mail w polu „nazwa” dla tego użytkownika (nazwa użytkownika!) wraz z hasłem. * autocomplete="new-password" pola Hasło to wskazówka dla menedżera haseł, że powinna zaoferować zapisanie tej wartości jako hasła do bieżącej witryny. Następnie możesz użyć autocomplete="current-password", aby włączyć autouzupełnianie w formularzu logowania (pamiętaj, że to rejestrację).

Krok 4. Pomóż użytkownikom wpisywać bezpieczne hasła

Czy zauważyłeś(-aś) jakieś problemy z wpisanym hasłem w formularzu?

Wystąpiły 2 problemy: * Nie można sprawdzić, czy wartość hasła jest ograniczona. * Nie widać hasła, aby można było sprawdzić, czy jest poprawne.

Nie każ użytkownikom zgadywać!

Zaktualizuj sekcję haseł w index.html za pomocą tego kodu:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. 
          Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

Spowoduje to dodanie nowych funkcji, które pomogą użytkownikom wpisywać hasła:

  • Przycisk (właściwie tekst) do włączania wyświetlania hasła. (Parametr funkcja ta będzie dodawana za pomocą JavaScriptu).
  • Atrybut aria-label przycisku przełączania hasła.
  • Atrybut aria-describedby do wpisania hasła. Czytniki ekranu przeczytaj etykietę, typ danych wejściowych (hasło), a następnie opis.

Aby włączyć przycisk przełączania hasła i wyświetlać użytkownikom informacje o ograniczeniach związanych z hasłami, skopiuj cały poniższy kod JavaScript i wklej go w swoim pliku js/main.js.

Kod CSS jest już w odpowiednim miejscu z kroku 2. Zobacz, jak działa przycisk przełączania hasła stylu i umiejscowienia).

  • Czy ikona będzie działać lepiej niż tekst na przełączyć wyświetlanie hasła? Wypróbuj testy łatwości obsługi zniżek. z niewielką grupą znajomych lub współpracowników.

  • Aby dowiedzieć się, jak czytniki ekranu współpracują z formularzami, zainstaluj rozszerzenie ChromeVox i poruszaj się po formularzu. Czy możesz wypełnić formularz tylko przy użyciu ChromeVox? Jeśli nie, co należy zmienić?

Oto jak powinien wyglądać Twój formularz:

Co jeszcze

To ćwiczenie w Codelabs nie obejmuje kilku ważnych funkcji:

  • Sprawdzam, czy jakieś hasła nie zostały przejęte. Nigdy nie zezwalaj na hasła, które zostały przejęte. Możesz (i powinna) skorzystać z usługi sprawdzania haseł, by wychwytywać przejęte hasła. Możesz użyć istniejącej usługi lub uruchomić ją samodzielnie na własnych serwerach. Spróbuj! Dodaj hasło w formularzu.

  • Link do Warunków korzystania z usługi i polityki prywatności: wyjaśnij użytkownikom, jak ochrony ich danych.

  • Styl i marka: zadbaj o to, by pasowały do reszty witryny. Podczas wpisywania nazw i adresów i dokonywania płatności, użytkownicy muszą czuć się komfortowo, mając pewność, że nadal są we właściwym miejscu.

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