Ćwiczenia z programowania dotyczące formularza rejestracyjnego

[Imię i nazwisko]

Z tego ćwiczenia w programie dowiesz się, jak utworzyć bezpieczny, dostępny i łatwy w obsłudze formularz rejestracyjny.

Krok 1. Użyj odpowiedniego kodu HTML

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

  • Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.

Obejrzyj kod HTML swojego formularza w języku: index.html. Pojawią się pola do wpisania imienia i nazwiska, adresu e-mail i hasła. Każda z nich znajduje się w sekcji i ma etykietę. Przycisk Zarejestruj się to... <button>! W dalszej części ćwiczenia z programowania 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 rejestracyjnego. Pokazuje, jak wygląda formularz. Nie ma tu kodu CSS innego niż domyślne style przeglądarki.

  • Czy style domyślne wyglądają prawidłowo? Co zmieniłbyś/zmieniłabyś, żeby poprawić wygląd formularza?
  • Czy style domyślne działają prawidłowo? Jakie problemy mogą wystąpić podczas korzystania z formularza w obecnej postaci? A co, żeby to zrobić 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żna zdobyć mnóstwo sprzętu i skonfigurować laboratorium urządzeń, ale są tańsze i prostsze sposoby na wypróbowanie formularza 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 rejestracyjnego.

  • 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 prawdziwym urządzeniu. Jakie widzisz różnice?

Krok 2. Dodaj CSS, aby formularz działał lepiej

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

Jak dotąd w kodzie HTML wszystko jest w porządku, ale musisz upewnić się, że formularz działa dobrze dla dużej liczby użytkowników, którzy korzystają z urządzeń mobilnych i komputerów.

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

Skopiuj ten kod CSS i wklej go do pliku css/main.css:

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

  • Czy ta usługa porównywania cen działa w przypadku różnych przeglądarek i rozmiarów ekranu?

  • Spróbuj dostosować ustawienia padding, margin i font-size, aby dopasować je do urządzeń testowych.

  • Usługa porównywania cen jest zoptymalizowana pod kątem urządzeń mobilnych. Zapytania o multimedia pozwalają stosować reguły CSS do widocznych obszarów o szerokości co najmniej 400px, a potem ponownie do widocznego obszaru o szerokości co najmniej 500px. Czy te punkty przerwania są wystarczające? Jak należy wybierać punkty przerwania formularzy?

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

W tym kroku dodajesz atrybuty do elementów wejściowych, by umożliwić przeglądarce przechowywanie i autouzupełnianie wartości pól formularza i ostrzegać użytkowników 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 mają duże znaczenie: * type="password" zasłania wpisany tekst 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

Kliknij Wyświetl aplikację, a następnie kliknij etykietę E-mail. Co się stanie? Zaznaczenie jest przenoszone do danych wejściowych e-maila, ponieważ etykieta ma wartość for, która odpowiada wartości id w tym polu. W ten sam sposób działają inne etykiety i dane wejściowe. Czytniki ekranu czytają też tekst etykiety, gdy etykieta (lub powiązane z nią dane wejściowe) jest zaznaczona. Możesz to zrobić, korzystając z rozszerzenia ChromeVox.

Spróbuj przesłać formularz z pustym polem. Przeglądarka nie prześle formularza, a jedynie poprosi o uzupełnienie brakujących danych i ustawi fokus. Wynika to z dodania atrybutu require do wszystkich danych wejściowych. Teraz spróbuj podać hasło, które ma mniej niż 8 znaków. Przeglądarka ostrzega, że hasło nie jest wystarczająco długie, i powoduje zaznaczenie pola wpisywania hasła z powodu atrybutu minlength="8". To samo działa w przypadku metody pattern (używanej do wpisywania nazwy) i innych ograniczeń weryfikacji. Przeglądarka robi to automatycznie, nie używając dodatkowego kodu.

Użycie wartości name autocomplete w polu Imię i nazwisko jest uzasadnione, ale co z innymi danymi wejściowymi? * autocomplete="username" w polu Adres e-mail oznacza, że menedżer haseł w przeglądarce zapisze ten adres e-mail jako nazwę użytkownika (nazwę użytkownika) na potrzeby hasła. * autocomplete="new-password" w polu Hasło to wskazówka dla menedżera haseł, że należy tę wartość zapisać jako hasło do bieżącej strony. Następnie możesz użyć autocomplete="current-password", aby włączyć autouzupełnianie w formularzu logowania (pamiętaj, że to formularz sign-up).

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

Czy zauważyłeś coś nie tak z podanym hasłem?

Są 2 problemy: * Nie można sprawdzić, czy wartości hasła są ograniczone. * Nie widzisz hasła, żeby sprawdzić, czy jest poprawne.

Nie każ użytkownikom zgadywać!

Zaktualizuj sekcję hasła 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 pomogą użytkownikom wpisywać hasła:

  • Przycisk (w rzeczywistości tylko tekst) do przełączania wyświetlania hasła. (Przyciski zostaną dodane przy użyciu JavaScriptu).
  • Atrybut aria-label przycisku przełączania hasła.
  • Atrybut aria-describedby do wpisywania hasła. Czytniki ekranu odczytują tekst etykiety, typ danych wejściowych (hasło), a następnie opis.

Aby włączyć przycisk przełączania haseł i wyświetlić użytkownikom informacje o ograniczeniach dotyczących haseł, skopiuj poniższy kod JavaScript i wklej go do swojego pliku js/main.js.

(usługa porównywania cen jest już używana z kroku 2. Zobacz, jak wygląda styl i umiejscowienie przycisku przełączania haseł).

  • Czy ikona działa lepiej od tekstu do przełączania wyświetlania haseł? Wypróbuj testy łatwości obsługi zniżek w niewielkiej grupie znajomych lub współpracowników.

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

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

Co dalej

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

  • Sprawdzam, czy hasła nie zostały przejęte. Nigdy nie zezwalaj na przejęte hasła. Aby wyłapać przejęte hasła, możesz skorzystać z usługi sprawdzania haseł. 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 dokumentu z Warunkami korzystania z usługi i polityką prywatności: wyjaśnij użytkownikom, jak chronisz ich dane.

  • Styl i elementy marki: zadbaj o to, aby pasowały do reszty witryny. Podczas wpisywania nazwisk i adresów oraz dokonywania płatności, użytkownicy muszą czuć się komfortowo i wierzyć, że wciąż są we właściwym miejscu.

  • Analytics i monitorowanie rzeczywistych użytkowników: sprawdzanie działania i użyteczności projektu formularza z myślą o prawdziwych użytkownikach.