Z tego ćwiczenia w programie dowiesz się, jak utworzyć bezpieczny, dostępny i łatwy w obsłudze formularz logowania.
1. Używaj zrozumiałego kodu HTML
Wykorzystaj te elementy dostosowane do konkretnego zadania:
<form>
<section>
<label>
<button>
Jak widzisz, te elementy włączają wbudowane funkcje przeglądarki, poprawiają dostępność i nadają znacznikom znaczenie.
Kliknij Remiks, aby edytować projekt i udostępnić go do edycji.
Dodaj ten kod do elementu
<body>
:<form action="#" method="post"> <h1>Sign in</h1> <section> <label>Email</label> <input> </section> <section> <label>Password</label> <input> </section> <button>Sign in</button> </form>
Oto jak powinien wyglądać plik
index.html
w tym miejscu:Kliknij Wyświetl aplikację, aby wyświetlić podgląd formularza logowania. Dodany kod HTML jest prawidłowy i prawidłowy, ale domyślny styl przeglądarki sprawia, że wygląda on okropnie i utrudnia korzystanie z niego zwłaszcza na urządzeniach mobilnych.
Kliknij Wyświetl źródło, aby wrócić do kodu źródłowego.
2. Styl na palce i kciuki
Dostosuj dopełnienie, marginesy i rozmiar czcionki, aby dane wejściowe działały dobrze na urządzeniach mobilnych.
Skopiuj ten kod CSS i wklej go do swojego pliku
style.css
:Kliknij Wyświetl aplikację, aby zobaczyć nowy formularz logowania.
Kliknij Wyświetl źródło, aby wrócić do pliku
style.css
.
To naprawdę dużo kodu! Najważniejsze kwestie, o których trzeba pamiętać o zmianach rozmiarów:
- Obiekty
padding
imargin
zostały dodane do danych wejściowych. font-size
działa inaczej niż na komputerze.
Selektor :invalid
służy do wskazywania, kiedy dane wejściowe mają nieprawidłową wartość.
To jeszcze nie działa.
Układ CSS jest dostosowany do urządzeń mobilnych:
- Domyślny CSS działa dla widocznych obszarów o szerokości mniejszej niż 450 pikseli.
- Sekcja zapytania o multimedia ustawia zastąpienia w widocznych obszarach o szerokości co najmniej 450 pikseli.
Jeśli tworzysz własny formularz, bardzo ważne jest na tym etapie przetestowania kodu na rzeczywistych urządzeniach, na komputerach i urządzeniach mobilnych:
- Czy etykiety i wprowadzany tekst są czytelne, zwłaszcza dla osób niedowidzących?
- Czy dane wejściowe i przycisk Zaloguj się są wystarczająco duże, by używać ich jako docelowych elementów dotykowych kciuka?
3. Dodaj atrybuty wejściowe, aby włączyć wbudowane funkcje przeglądarki
Włącz w przeglądarce przechowywanie i autouzupełnianie wartości wejściowych oraz zapewnij dostęp do wbudowanych funkcji zarządzania hasłami.
Dodaj atrybuty do kodu HTML formularza, aby wyglądał on tak:
<form action="#" method="post"> <h1>Sign in</h1> <section> <label for="email">Email</label> <input id="email" name="email" type="email" autocomplete="username" required autofocus> </section> <section> <label for="password">Password</label> <input id="password" name="password" type="password" autocomplete="current-password" required> </section> <button id="sign-in">Sign in</button> </form>
Wyświetl aplikację ponownie i kliknij E-mail.
Zwróć uwagę, jak zaznaczenie jest przenoszone do pola adresu e-mail. Dzieje się tak, ponieważ etykieta jest powiązana z danymi wejściowymi przez atrybut
for="email"
. Czytniki ekranu rozpoznają też tekst etykiety, gdy etykieta lub powiązane z nią dane wejściowe zostaną zaznaczone.Zaznacz pole wpisywania e-maila na urządzeniu mobilnym.
Zwróć uwagę, że klawiatura jest zoptymalizowana pod kątem wpisywania adresu e-mail. Na przykład znaki
@
i.
mogą być wyświetlane na klawiaturze podstawowej, a w systemie operacyjnym nad klawiaturą mogą być wyświetlane zapisane e-maile. Wszystko to dzieje się dlatego, że atrybuttype="email"
jest stosowany do elementu<input>
.Wpisz tekst w polu do wpisywania hasła.
Tekst jest domyślnie ukryty, ponieważ do elementu zastosowano atrybut
type="password"
.
- Atrybuty
autocomplete
,name
,id
itype
pomagają przeglądarkom zrozumieć rolę danych wejściowych w celu przechowywania danych, które można później wykorzystać na potrzeby autouzupełniania.
- Skoncentruj się na wpisywaniu adresu e-mail na komputerze i wpisz tekst.
Aby wyświetlić adres URL aplikacji, kliknij Pełny ekran . Jeśli zapisałeś adresy e-mail w przeglądarce,
prawdopodobnie zobaczysz okno dialogowe, które umożliwi Ci ich wybranie. Dzieje się tak, ponieważ atrybut
autocomplete="username"
został zastosowany do danych wejściowych dotyczących adresu e-mail.
- Reguły
autocomplete="username"
iautocomplete="current-password"
ułatwiają przeglądarkom używanie zapisanych wartości do autouzupełniania danych wejściowych.
Różne przeglądarki korzystają z różnych technik, aby określić rolę danych wejściowych formularza i zapewnić autouzupełnianie na różnych stronach.
Aby samodzielnie wypróbować tę funkcję, dodaj i usuń atrybuty.
Testowanie działania na różnych platformach jest bardzo ważne. Wpisz wartości i prześlij formularz w różnych przeglądarkach na różnych urządzeniach. Dzięki narzędziu BrowserStack można łatwo przeprowadzać testy na różnych platformach, co jest bezpłatne w przypadku projektów open source. Wypróbuj
Oto jak powinien wyglądać plik index.html
w tym miejscu:
4. Dodaj interfejs, aby przełączyć wyświetlanie hasła
Eksperci ds. użyteczności zdecydowanie zalecają dodanie ikony lub przycisku, który pozwala użytkownikom zobaczyć tekst wpisywany w polu Hasło. Nie ma na to wbudowanego sposobu, więc musisz wdrożyć go samodzielnie za pomocą JavaScriptu.
Kod dodający tę funkcję jest bardzo prosty. W tym przykładzie użyto tekstu, a nie ikony.
Zaktualizuj pliki index.html
, style.css
i script.js
w następujący sposób.
Dodaj przełącznik do sekcji haseł w pliku
index.html
:<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="current-password" required> </section>
Dodaj ten kod CSS na dole pliku
style.css
:button#toggle-password { background: none; border: none; cursor: pointer; font-weight: 300; padding: 0; position: absolute; top: -4px; right: -2px; }
Dzięki temu przycisk Pokaż hasło wygląda jak zwykły tekst i wyświetla się w prawym górnym rogu sekcji haseł.
Dodaj do pliku
script.js
poniższy kod JavaScript, aby przełączyć wyświetlanie hasła i ustawić odpowiednią wartośćaria-label
:const passwordInput = document.getElementById('password'); const togglePasswordButton = document.getElementById('toggle-password'); togglePasswordButton.addEventListener('click', togglePassword); function togglePassword() { if (passwordInput.type === 'password') { passwordInput.type = 'text'; togglePasswordButton.textContent = 'Hide password'; togglePasswordButton.setAttribute('aria-label', 'Hide password.'); } else { passwordInput.type = 'password'; togglePasswordButton.textContent = 'Show password'; togglePasswordButton.setAttribute('aria-label', 'Show password as plain text. ' + 'Warning: this will display your password on the screen.'); } }
Wypróbuj teraz funkcję wyświetlania hasła.
- Wyświetl aplikację.
- Wpisz tekst w polu hasła.
- Kliknij Pokaż hasło.
Powtórz 4 krok w różnych przeglądarkach i różnych systemach operacyjnych.
Zastanów się nad projektem UX. Czy użytkownicy zauważą opcję Pokaż hasło i zrozumie ją? Czy można lepiej udostępnić tę funkcję? To dobry moment, by przeprowadzić testowanie użyteczności ze zniżką w małej grupie znajomych lub współpracowników.
Aby dowiedzieć się, jak ta funkcja działa w przypadku czytników ekranu, zainstaluj rozszerzenie klasycznej wersji ChromeVox i poruszaj się po formularzu. Czy wartości aria-label
działają zgodnie z oczekiwaniami?
Niektóre strony, np. Gmail, do przełączania wyświetlania haseł używają ikon, a nie tekstu. Gdy skończysz pracę z programowania, zaimplementuj ją za pomocą obrazów SVG. Material Design obejmuje wysokiej jakości ikony, które można pobrać bezpłatnie.
Oto jak powinien wyglądać Twój kod:
5. Dodaj sprawdzanie poprawności formularza
Jeśli chcesz pomóc użytkownikom w prawidłowym wprowadzaniu danych, zezwól im na ich weryfikację przed przesłaniem formularza i pokaż, co muszą zmienić.
Elementy formularzy i atrybuty HTML mają wbudowane funkcje do podstawowej weryfikacji. Jednak gdy użytkownicy wpisują dane i próbują przesłać formularz, korzystaj też z JavaScriptu, by uzyskać dokładniejsze informacje.
W tym kroku używany jest interfejs Constraint Validation API (który jest powszechnie obsługiwany), aby dodać niestandardową funkcję weryfikacji za pomocą wbudowanego interfejsu przeglądarki, który ustawia zaznaczenie i wyświetla prompty.
Poinformuj użytkowników o ograniczeniach dotyczących haseł i innych danych wejściowych. Nie każ im zgadywać!
Zaktualizuj sekcję haseł w pliku
index.html
:<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="current-password" aria-describedby="password-constraints" required> <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div> </section>
W związku z tym pojawią się 2 nowe funkcje:
- Informacje o ograniczeniach dotyczących haseł
- Atrybut
aria-describedby
służący do wprowadzania hasła (czytniki ekranu odczytują tekst etykiety, typ danych wejściowych (hasło), a następnie opis).
Dodaj ten kod CSS na dole pliku
style.css
:div#password-constraints { margin: 5px 0 0 0; font-size: 16px; }
Dodaj do pliku
script.js
ten kod JavaScript:passwordInput.addEventListener('input', resetCustomValidity); function resetCustomValidity() { passwordInput.setCustomValidity(''); } // A production site would use more stringent password testing. function validatePassword() { let message= ''; if (!/.{8,}/.test(passwordInput.value)) { message = 'At least eight characters. '; } if (!/.*[A-Z].*/.test(passwordInput.value)) { message += 'At least one uppercase letter. '; } if (!/.*[a-z].*/.test(passwordInput.value)) { message += 'At least one lowercase letter.'; } passwordInput.setCustomValidity(message); } const form = document.querySelector('form'); const signinButton = document.querySelector('button#sign-in'); form.addEventListener('submit', handleFormSubmission); function handleFormSubmission(event) { event.preventDefault(); validatePassword(); form.reportValidity(); if (form.checkValidity() === false) { } else { // On a production site do form submission. alert('Logging in!') signinButton.disabled = 'true'; } }
Wypróbuj
Wszystkie najnowsze przeglądarki mają wbudowane funkcje sprawdzania poprawności formularzy i obsługi walidacji za pomocą języka JavaScript.
- Wpisz nieprawidłowy adres e-mail i kliknij Zaloguj się. W przeglądarce pojawi się ostrzeżenie – JavaScript nie jest wymagany.
- Wpisz prawidłowy adres e-mail, a potem kliknij Zaloguj się bez podawania hasła. Przeglądarka ostrzega o braku wymaganej wartości i ustawia fokus na wprowadzeniu hasła.
- Wpisz nieprawidłowe hasło i kliknij Zaloguj się. Teraz zobaczysz różne komunikaty w zależności od problemu.
Wypróbuj różne sposoby pomagania użytkownikom w wprowadzaniu adresów e-mail i haseł. Ulepszone pola formularza haseł zawierają ciekawe sugestie.
Oto jak powinien wyglądać Twój kod:
Pójdź o krok dalej
Nie są one pokazywane w tym ćwiczeniu z programowania, ale i tak przyda Ci się te 4 ważne funkcje formularza logowania:
Dodaj przycisk Nie pamiętasz hasła?, który ułatwia użytkownikom resetowanie haseł.
Podaj link do warunków korzystania z usługi i dokumentów z polityką prywatności, aby użytkownicy wiedzieli, jak chronisz ich dane.
Zastanów się nad stylem i marką, a potem upewnij się, że te dodatkowe elementy współgrają z resztą witryny.
Dodaj Analytics i RUM, aby móc testować i monitorować wydajność oraz użyteczność projektu formularza.