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:
- 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żywaj usługi takiej jak BrowserStack, aby testować ją na różnych urządzeniach i w różnych przeglądarkach.
- Wypróbuj formularz za pomocą czytnika ekranu, takiego jak rozszerzenie ChromeVox do Chrome.
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
ifont-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 najmniej500px
. 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.