Dziękujemy za zainteresowanie konferencją Google I/O. Oglądanie treści na żądanie.

Ta strona została przetłumaczona przez Cloud Translation API.

Ćwiczenia z programowania dotyczące formularza rejestracyjnego

Sam Dutton

Dowiedz się, jak utworzyć bezpieczny, dostępny i łatwiejszy w obsłudze formularz rejestracji. Ostateczna wersja formularza jest dostępna w CodePen.

1. Używanie znaczącego kodu HTML

Dowiedz się, jak używać elementów formularza, aby w pełni wykorzystać wbudowane funkcje przeglądarki.

Utwórz nowy Pen.

Skopiuj poniższy kod i wklej go do edytora HTML.

<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 podgląd na żywo, aby wyświetlić formularz HTML. Pola do wpisania nazwy, adresu e-mail i hasła. Ten formularz używa tylko domyślnego kodu CSS przeglądarki.

Każde pole wejściowe znajduje się w sekcji i ma etykietę. Przycisk rejestracji jest, co ważne, <button>. W dalszej części tego laboratorium dowiesz się więcej o specjalnych możliwościach tych elementów.

Zadaj sobie te pytania:

Czy style domyślne wyglądają prawidłowo? Co byś zmienił, aby formularz wyglądał lepiej?
Czy style domyślne działają prawidłowo? Jakie problemy mogą wystąpić podczas korzystania z formularza w obecnej postaci? A co z urządzeniami mobilnymi? A co z czytnikami ekranu i innymi technologiami wspomagającymi?
Kim są Twoi użytkownicy i na jakie urządzenia oraz przeglądarki kierujesz reklamy?

Testowanie formularza

Możesz kupić wiele urządzeń i utworzyć laboratorium urządzeń, ale istnieją tańsze i prostsze sposoby na przetestowanie formularza w różnych przeglądarkach, na różnych platformach i urządzeniach:

Użyj trybu urządzenia w Narzędziach deweloperskich w Chrome, aby symulować urządzenia mobilne.
Wyślij adres URL z komputera na telefon.
Użyj usługi takiej jak BrowserStack, aby przeprowadzić testy na różnych urządzeniach i w różnych przeglądarkach.
Wypróbuj formularz, korzystając z czytnika ekranu, np. rozszerzenia do Chrome ChromeVox.

Otwórz podgląd na żywo w CodePen lub nasz podgląd na żywo. 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?

2. Dodawanie kodu CSS, aby formularz działał lepiej

Z kodem HTML nie ma na razie problemu, ale musisz się upewnić, że formularz działa prawidłowo na urządzeniach mobilnych i komputerach różnych użytkowników.

W tym kroku dodasz CSS, aby ułatwić korzystanie z formularza. Skopiuj i wklej ten kod CSS do pliku css/main.css.

Kliknij podgląd, aby zobaczyć formularz rejestracyjny ze stylem.

Czy ten kod CSS działa w przypadku różnych przeglądarek i rozmiarów ekranu?

Spróbuj dostosować wartości padding, margin i font-size do swoich urządzeń testowych.
Usługa porównywania cen jest zoptymalizowana pod kątem urządzeń mobilnych. Użyj zapytań o multimedia, aby zastosować reguły 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 przerwania są odpowiednie? Jak wybrać punkty podziału dla formularzy?

3. Dodawanie atrybutów ułatwiających użytkownikom wprowadzanie danych

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 polach z brakującymi lub nieprawidłowymi danymi.

Zaktualizuj kod 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 wykonują wiele zadań:

type="password" zasłania tekst podczas wpisywania i umożliwia menedżerowi haseł przeglądarki sugerowanie silnego hasła.
type="email" zapewnia podstawową weryfikację i gwarantuje, że użytkownicy urządzeń mobilnych otrzymają odpowiednią klawiaturę.

W podglądzie kliknij etykietę E-mail. Co się dzieje Fokus przenosi się na pole do wpisywania adresu e-mail, ponieważ etykieta ma wartość for, która pasuje do atrybutu id pola do wpisywania adresu 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 zaznaczona.

Spróbuj przesłać formularz z pustym polem. Przeglądarka nie prześle formularza i wyświetli prośbę o uzupełnienie brakujących danych oraz ustawi fokus. Dzieje się tak, ponieważ do wszystkich danych wejściowych dodaliśmy atrybut require.

Teraz spróbuj przesłać hasło, które ma mniej niż 8 znaków. Przeglądarka wyświetla ostrzeżenie, że hasło jest za krótkie, i ustawia fokus na polu wprowadzania hasła ze względu na atrybut minlength="8". To samo dotyczy tagu pattern (używanego do wprowadzania nazwy) i innych ograniczeń weryfikacji. Przeglądarka robi to wszystko automatycznie, bez konieczności dodawania dodatkowego kodu.

Użycie autocomplete wartości name w polu Imię i nazwisko jest uzasadnione, ale co z pozostałymi polami?

autocomplete="username" w polu Email oznacza, że menedżer haseł w przeglądarce zapisze adres e-mail jako „nazwę” tego użytkownika (nazwę użytkownika!) wraz z hasłem.
autocomplete="new-password" w przypadku atrybutu Password to wskazówka dla menedżera haseł, że powinien zaproponować zapisanie tej wartości jako hasła do bieżącej witryny. Następnie możesz użyć autocomplete="current-password", aby włączyć automatyczne wypełnianie w formularzu logowania. Pamiętaj, że to formularz rejestracji.

4. Pomaganie użytkownikom we wpisywaniu bezpiecznych haseł

Czy zauważono coś nieprawidłowego podczas wpisywania hasła? Występują 2 problemy:

Nie ma możliwości sprawdzenia, czy wartość hasła podlega ograniczeniom.
Nie możesz wyświetlić hasła, aby sprawdzić, czy jest prawidłowe.

Nie zmuszaj użytkowników do zgadywania. Zaktualizuj sekcję hasła w index.html, używając tego kodu:

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

Dodaje to nowe funkcje, które pomagają użytkownikom wpisywać hasła:

Przycisk (w rzeczywistości tylko tekst) do przełączania wyświetlania hasła. (Funkcja przycisku zostanie dodana za pomocą JavaScriptu).
Atrybut aria-label przycisku przełączania hasła.
Atrybut aria-describedby dla pola wpisywania hasła. Czytniki ekranu odczytują tekst etykiety, 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 dotyczących haseł, skopiuj JavaScript i wklej go do edytora JavaScript.

Czy ikona sprawdzi się lepiej niż tekst do przełączania wyświetlania hasła? Wypróbuj testowanie użyteczności z rabatem w małej grupie znajomych lub współpracowników.
Aby sprawdzić, jak czytniki ekranu działają w przypadku formularzy, zainstaluj rozszerzenie ChromeVox i przejdź przez formularz. Czy możesz wypełnić formularz, korzystając tylko z czytnika ChromeVox? Jeśli nie, co byś zmienił?

Lepsze rezultaty

To ćwiczenie nie obejmuje kilku ważnych funkcji:

Sprawdzanie, czy nie przejęto haseł. Nigdy nie zezwalaj na hasła, które zostały przejęte. Możesz (i powinieneś) używać usługi sprawdzania haseł, aby wykrywać przejęte hasła.
Podaj linki do dokumentów z warunkami korzystania z usługi i polityką prywatności. Wyjaśnij użytkownikom, w jaki sposób chronisz ich dane.
Zaktualizuj styl i markę formularzy, aby pasowały do reszty witryny. Dzięki temu użytkownicy mają pewność, że są we właściwym miejscu, gdy wpisują imiona i nazwiska oraz adresy, a zwłaszcza gdy dokonują płatności.
Dodaj analizy i monitorowanie rzeczywistych użytkowników. Umożliwia testowanie i monitorowanie wydajności i użyteczności projektu formularza w przypadku rzeczywistych użytkowników.