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

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

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 styl domyślny wygląda dobrze? Co należałoby zmienić, aby formularz wyglądał lepiej?
  • Czy domyślne style działają prawidłowo? Jakie problemy mogą wystąpić podczas korzystania z 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ży sprzęt i skonfigurować laboratorium urządzeń, ale są tańsze i prostsze sposoby testowania formularza w wielu przeglądarkach, na różnych platformach i 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 rzeczywistym urządzeniu. Jakie widzisz różnice?

Krok 2. Dodaj CSS, aby ulepszyć formularz

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

Do tej pory nie znaleźliśmy ż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, by ułatwić korzystanie z formularza.

Skopiuj i wklej cały kod CSS do pliku css/main.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 ta usługa porównywania cen działa na różne przeglądarki i ekrany o różnych rozmiarach?

  • 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 wybrać punkty przerwania dla formularzy?

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

W tym kroku dodajesz atrybuty do elementów wejściowych, aby umożliwić przeglądarce przechowywanie i autouzupełnianie wartości pól formularza oraz ostrzeganie 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 bardzo często: * type="password" zasłania wpisany tekst i pozwala menedżerowi haseł w przeglądarce zasugerować silne hasło. * type="email" zapewnia podstawową weryfikację i zapewnia użytkownikom mobilnym odpowiednią klawiaturę. Spróbuj!

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 informują też o tekście etykiety, gdy etykieta (lub powiązane z nią dane wejściowe) jest zaznaczony. Możesz to zrobić za pomocą rozszerzenia ChromeVox.

Spróbuj przesłać formularz z pustym polem. Przeglądarka nie prześle formularza, a zamiast niego wyświetli się prośba o uzupełnienie brakujących danych i ustawienie zaznaczenia. Dzieje się tak, ponieważ atrybut require został dodany do wszystkich wejść. Teraz spróbuj przesłać hasło, które ma 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 robi to automatycznie, bez żadnego 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 atrybutu autocomplete="new-password" w elementach 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 wpisywać bezpieczne hasła

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

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 w JavaScripcie).
  • 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 wejściowych (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.

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

  • Czy ikona będzie działać 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 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 chcesz zmienić?

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 hasła, które zostały przejęte. Możesz (i powinno) 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 do formularza sprawdzanie hasła.

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

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