Ćwiczenia z programowania dotyczące formularza rejestracyjnego

Sam Dutton

Z tego ćwiczenia w Codelab dowiesz się, jak utworzyć bezpieczny, dostępny i łatwy w użyciu formularz rejestracji.

Krok 1. Używaj prawidłowego kodu HTML

Z tego kroku dowiesz się, jak korzystać z elementów formularza, aby w pełni wykorzystać wbudowane funkcje przeglądarki.

  • Kliknij Remixuj do edycji, aby umożliwić edycję projektu.

Sprawdź kod HTML formularza w index.html. Zobaczysz pola na imię i nazwisko, adres e-mail oraz hasło. Każda z nich znajduje się w sekcji i ma etykietę. Przycisk Zarejestruj się to… <button> W dalszej części tego ćwiczenia dowiesz się, jakie są specjalne właściwości 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. Tutaj widzisz, jak wygląda formularz bez kodu CSS, z wyjątkiem domyślnych stylów przeglądarki.

  • Czy style domyślne sięsprawdziły? Co zmienisz, aby formularz wyglądał lepiej?
  • Czy domyślne style działają prawidłowo? Jakie problemy mogą wystąpić podczas korzystania z obecnej wersji formularza? A na urządzeniach mobilnych? A czy czytniki ekranu lub inne technologie wspomagające?
  • Kim są Twoi użytkownicy i na jakie urządzenia oraz przeglądarki chcesz kierować reklamy?

Testowanie formularza

Możesz kupić dużo sprzętu i utworzyć laboratorium urządzeń, ale istnieją tańsze i prostsze sposoby testowania formularzy w różnych przeglądarkach, na różnych platformach i na różnych urządzeniach:

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

  • Wypróbuj formularz na różnych urządzeniach, korzystając z trybu urządzenia w Narzędziach deweloperskich w Chrome.
  • Teraz otwórz formularz na telefonie lub innym urządzeniu. Jakie widzisz różnice?

Krok 2. Dodaj CSS, aby ulepszyć działanie formularza

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

Do tej pory nie wykryto żadnych problemów z HTML-em, ale musisz się upewnić, że formularz działa prawidłowo na różnych urządzeniach mobilnych i komputerach.

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

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

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

  • Czy ten kod CSS działa w różnych przeglądarkach i przy różnych rozmiarach ekranu?

  • Spróbuj dostosować wartości padding, margin i font-size do swoich urządzeń testowych.

  • Kod CSS jest zoptymalizowany pod kątem urządzeń mobilnych. Zapytania o multimedia służą do stosowania reguł CSS do widocznych obszarów o szerokości co najmniej 400px, a następnie do widocznych obszarów o szerokości co najmniej 500px. Czy te punkty graniczne są odpowiednie? Jak wybierać punkty przełamania w przypadku formularzy?

Krok 3. Dodaj atrybuty, które ułatwią użytkownikom wprowadzanie danych

Na tym etapie dodaj atrybuty do elementów wejściowych, aby umożliwić przeglądarce przechowywanie i automatyczne wypełnianie wartości pól formularza oraz ostrzeganie o półach z brakami 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 mają wiele zalet: * type="password" zaciemnia tekst podczas jego wpisywania i umożliwia menedżerowi haseł przeglądarki zaproponowanie silnego hasła. * type="email" zapewnia podstawową weryfikację i zapewnia użytkownikom mobilnym odpowiednią klawiaturę. Wypróbuj to.

Kliknij kolejno Wyświetl aplikację i etykietę E-mail. Co się dzieje Fokus przenosi się na pole tekstowe adres e-mail, ponieważ etykieta ma wartość for, która pasuje do wartości id w polu tekstowym adres e-mail. Pozostałe etykiety i dane wejściowe działają w ten sam sposób. Czytniki ekranu odczytują też tekst etykiety, gdy etykieta (lub powiązane z nią pole wejściowe) zostanie wybrana. Możesz spróbować tego za pomocą rozszerzenia ChromeVox.

Spróbuj przesłać formularz z pustym polem. Przeglądarka nie prześle formularza, ale wyświetli prompt z prośbą o uzupełnienie brakujących danych i ustawi fokus. Dzieje się tak, ponieważ atrybut require został dodany do wszystkich wejść. Spróbuj teraz przesłać hasło zawierające mniej niż 8 znaków. Przeglądarka ostrzega, że hasło nie jest wystarczająco długie, i skupia uwagę na polu z hasłem, ponieważ zawiera ono atrybut minlength="8". To samo dotyczy atrybutu pattern (używanego do wprowadzania nazwy) i innych ograniczeń weryfikacji. Przeglądarka wykonuje to automatycznie, bez potrzeby dodawania dodatkowego kodu.

Użycie wartości autocomplete name dla danych wejściowych Pełna nazwa ma sens, ale co z innymi danymi wejściowymi? * autocomplete="username" w polu E-mail oznacza, że menedżer haseł przeglądarki zapisze adres e-mail jako „nazwę” tego użytkownika (czyli jego nazwę użytkownika) wraz z hasłem. * W przypadku parametru autocomplete="new-password" w sekcji Hasło jest to podpowiedź dla menedżera haseł, aby zaproponował zapisanie tej wartości jako hasła do bieżącej witryny. Następnie możesz użyć opcji autocomplete="current-password", aby włączyć autouzupełnianie w formularzu logowania (pamiętaj, że jest to formularz rejestracji).

Krok 4. Pomóż użytkownikom w tworzeniu bezpiecznych haseł

Czy zauważyłeś/zauważyłaś coś nie tak z hasłem w formularzu?

Występują 2 problemy: * Nie ma możliwości sprawdzenia, czy występują ograniczenia dotyczące wartości hasła. * Nie możesz zobaczyć hasła, aby sprawdzić, czy je wpisano prawidłowo.

Nie zmuszaj użytkowników do zgadywania!

Zaktualizuj sekcję dotyczącą hasła w pliku 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>

Dodaliśmy nowe funkcje, które ułatwiają użytkownikom wpisywanie haseł:

  • Przycisk (w istocie tylko tekst) do przełączania wyświetlania hasła. (funkcja przycisku zostanie dodana za pomocą kodu JavaScript).
  • Atrybut aria-label dla przycisku przełączania hasła.
  • Atrybut aria-describedby dla pola tekstowego z hasłem. Czytniki ekranu odczytują tekst etykiety, typ danych (hasło), a następnie opis.

Aby włączyć przycisk przełączania hasła i pokazać użytkownikom informacje o ograniczeniach hasła, skopiuj cały kod JavaScript poniżej i wklej go do swojego pliku js/main.js.

(Usługa porównywania cen jest już skonfigurowana z poziomu kroku 2. Zobacz, jak jest stylizowany i umieszczany przycisk przełącznika hasła.

  • Czy ikona sprawdziłaby się lepiej niż tekst do przełączania wyświetlania hasła? Wypróbuj testowanie użyteczności z rabatem w małym gronie znajomych lub współpracowników.

  • Aby sprawdzić, jak czytniki ekranu działają z formularzami, zainstaluj rozszerzenie ChromeVox i przechodź przez formularz. Czy możesz wypełnić formularz tylko za pomocą ChromeVox? Jeśli nie, co byś zmienił(-a)?

Oto jak powinno wyglądać Twoje zgłoszenie:

Więcej informacji

To ćwiczenie nie obejmuje kilku ważnych funkcji:

  • Sprawdzanie, czy hasła nie zostały przejęte. Nigdy nie zezwalaj na używanie haseł, które zostały przejęte. Możesz (i powinieneś) używać usługi sprawdzania haseł, aby wykrywać przejęte hasła. Możesz użyć istniejącej usługi lub uruchomić ją samodzielnie na własnych serwerach. Spróbuj! Dodaj do formularza sprawdzanie hasła.

  • Link do dokumentów z warunkami korzystania z usługi i polityką prywatności: wyraźnie określ, jak chronisz dane użytkowników.

  • Styl i marka: upewnij się, że są one zgodne z resztą witryny. Podczas wpisywania nazw i adresów oraz dokonywania płatności użytkownicy muszą czuć się komfortowo i mieć pewność, że znajdują się we właściwym miejscu.

  • Statystyki i monitorowanie rzeczywistych użytkowników: umożliwiają testowanie i monitorowanie wydajności oraz użyteczności projektu formularza w realnych warunkach.