Tworzenie formularza logowania na podstawie funkcji przeglądarki obsługujących wiele platform

Sam Dutton

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak stworzyć bezpieczny, dostępny i łatwy w obsłudze formularz logowania.

1. Używaj zrozumiałego kodu HTML

Użyj w tym celu tych elementów:

  • <form>
  • <section>
  • <label>
  • <button>

Jak widać, te elementy włączają wbudowane funkcje przeglądarki, zwiększają dostępność i nadają treściom znaczenie znaczników.

  1. Aby edytować projekt, kliknij Remiksuj.

  2. Dodaj do elementu <body> ten kod:

    <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ć w tym momencie plik index.html:

  3. 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 jest trudny w obsłudze, szczególnie na urządzeniach mobilnych.

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

2. Dla palców i kciuków

Dostosuj dopełnienie, marginesy i rozmiary czcionek, aby dane wejściowe dobrze działały na urządzeniach mobilnych.

  1. Skopiuj ten kod CSS i wklej go do pliku style.css:

  2. Kliknij Wyświetl aplikację, aby zobaczyć formularz logowania w nowym stylu.

  3. Kliknij Wyświetl źródło, aby wrócić do pliku style.css.

To sporo kodu! Najważniejsze kwestie, na które należy zwrócić uwagę, to zmiany rozmiarów:

  • Do danych wejściowych dodano padding i margin.
  • font-size działa inaczej na urządzeniach mobilnych i komputerach.

Selektor :invalid wskazuje, kiedy dane wejściowe mają nieprawidłową wartość. To jeszcze nie działa.

Układ CSS jest dostosowany do urządzeń mobilnych:

  • Domyślny kod CSS jest przeznaczony dla widocznych obszarów o szerokości poniżej 450 pikseli.
  • Sekcja zapytań o multimedia zastępuje ustawienia dla widocznych obszarów o szerokości co najmniej 450 pikseli.

Na tym etapie bardzo ważne jest przetestowanie kodu na prawdziwych urządzeniach (komputerach i urządzeniach mobilnych) przy tworzeniu własnego formularza:

  • Czy etykiety i tekst wejściowy są czytelne, zwłaszcza dla osób niedowidzących?
  • Czy dane wejściowe i przycisk Zaloguj się są wystarczająco duże, by można było ich używać jako kciuków?

3. Dodaj atrybuty wejściowe, aby włączyć wbudowane funkcje przeglądarki

Włączenie przeglądarki do przechowywania i autouzupełniania wartości wejściowych oraz zapewnić dostęp do wbudowanych funkcji zarządzania hasłami.

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

  2. Wyświetl aplikację ponownie i kliknij E-mail.

    Zwróć uwagę, jak zaznaczenie przechodzi na pole adresu e-mail. Dzieje się tak, ponieważ etykieta jest powiązana z danymi wejściowymi przez atrybut for="email". Czytniki ekranu odczytują też tekst etykiety, gdy etykieta lub powiązane z nią dane wejściowe są zaznaczone.

  3. Zaznacz adres e-mail 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 głównej, a system operacyjny może wyświetlać zapisane e-maile nad klawiaturą. Wszystko to dzieje się dlatego, że atrybut type="email" jest stosowany do elementu <input>.

    Domyślna klawiatura e-mail na iOS.

  4. Wpisz tekst w polu hasła.

    Tekst jest domyślnie ukryty, ponieważ do elementu został zastosowany atrybut type="password".

  • Atrybuty autocomplete, name, id i type pomagają przeglądarkom zrozumieć rolę danych wejściowych w celu przechowywania danych, których można później użyć do autouzupełniania.
  1. Zaznacz adres e-mail na komputerze i wpisz tekst. Adres URL aplikacji zobaczysz po kliknięciu Pełny ekran Ikona pełnego ekranu. Jeśli masz w przeglądarce zapisane jakieś adresy e-mail, prawdopodobnie zobaczysz okno, które pozwala je wybrać. Dzieje się tak, ponieważ do danych wejściowych adresu e-mail został zastosowany atrybut autocomplete="username".
  • autocomplete="username" i autocomplete="current-password" ułatwiają przeglądarkom korzystanie z zapisanych wartości do autouzupełniania danych wejściowych.

Różne przeglądarki korzystają z różnych technik, by określić rolę danych wejściowych formularza i włączyć funkcję autouzupełniania na potrzeby wielu różnych witryn.

Dodaj i usuń atrybuty, aby samodzielnie wypróbować tę funkcję.

Bardzo ważne jest przetestowanie działania na różnych platformach. Wpisz wartości i prześlij formularz w różnych przeglądarkach na różnych urządzeniach. Za pomocą usługi BrowserStack, która jest bezpłatna dla projektów open source, można łatwo przeprowadzać testy na różnych platformach. Wypróbuj

Oto jak powinien wyglądać w tym momencie plik index.html:

4. Dodaj interfejs, aby przełączać wyświetlanie haseł

Eksperci ds. łatwości obsługi zdecydowanie zalecają dodanie ikony lub przycisku, dzięki któremu użytkownicy będą widzieć tekst wpisany w polu Hasło. Nie ma na to wbudowanego sposobu, więc musisz zaimplementować go samodzielnie, używając JavaScriptu.

Kod służący do dodania tej funkcji jest prosty. W tym przykładzie użyto tekstu, a nie ikony.

Zaktualizuj pliki index.html, style.css i script.js w ten sposób.

  1. Dodaj przełącznik do sekcji hasła 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>

  2. Dodaj ten kod CSS na końcu pliku style.css:

    button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}

    W ten sposób przycisk Pokaż hasło wygląda jak zwykły tekst i jest wyświetlany w prawym górnym rogu sekcji haseł.

  3. Dodaj ten kod JavaScript do pliku script.js, aby włą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.');
  }
}

  4. Wypróbuj teraz funkcję wyświetlania hasła.

    1. Wyświetl aplikację.

    2. Wpisz tekst w polu hasła.

    3. Kliknij Pokaż hasło.

  5. Powtórz czwarty krok w różnych przeglądarkach i systemach operacyjnych.

Przemyśl projekt interfejsu: czy użytkownicy zobaczą opcję Pokaż hasło i je zrozumieją? Czy jest lepszy sposób na zapewnienie tej funkcji? To dobry moment, aby we współpracy ze znajomymi lub współpracownikami spróbować obniżyć tę cenę na testy użyteczności.

Aby dowiedzieć się, jak ta funkcja działa w czytnikach ekranu, zainstaluj rozszerzenie klasycznej wersji ChromeVox i poruszaj się po formularzu. Czy wartości aria-label działają zgodnie z oczekiwaniami?

Niektóre strony, takie jak Gmail, do przełączania haseł używają ikon, a nie tekstu. Gdy skończysz ćwiczenia z programowania, wdróż je za pomocą obrazów SVG. Material Design oferuje wysokiej jakości ikony, które można pobrać bezpłatnie.

Oto jak Twój kod powinien wyglądać w tym punkcie:

5. Dodaj sprawdzanie poprawności formularza

Możesz pomóc użytkownikom poprawnie wpisywać dane, umożliwiając im sprawdzenie ich przed przesłaniem formularza i pokazywanie im, co muszą zmienić.

Elementy formularza HTML i atrybuty mają wbudowane funkcje podstawowej weryfikacji, ale należy także używać JavaScriptu, by przeprowadzić bardziej szczegółową weryfikację, gdy użytkownicy wpisują dane i próbują przesłać formularz.

Ten krok korzysta z interfejsu Constraint Validation API (który jest powszechnie obsługiwany), aby dodać niestandardową weryfikację 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ć.

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

Dodaliśmy 2 nowe funkcje:

  • Informacje o ograniczeniach dotyczących haseł
  • Atrybut aria-describedby do wpisania hasła (czytniki ekranu odczytują tekst etykiety, typ danych wejściowych (hasło), a następnie opis).

  1. Dodaj ten kod CSS na końcu pliku style.css:

    div#password-constraints {
  margin: 5px 0 0 0;
  font-size: 16px;
}

  2. 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';
  }
}

  3. Wypróbuj

    Wszystkie najnowsze przeglądarki mają wbudowane funkcje sprawdzania poprawności formularzy i obsługują weryfikację za pomocą JavaScriptu.

    1. Wpisz nieprawidłowy adres e-mail i kliknij Zaloguj się. Przeglądarka wyświetli ostrzeżenie – JavaScript nie jest wymagany.

    2. Wpisz prawidłowy adres e-mail, a następnie kliknij Zaloguj się bez hasła. Przeglądarka wyświetli ostrzeżenie o pominięciu wymaganej wartości i ustawi fokus na wpisywanie hasła.

    3. Wpisz nieprawidłowe hasło i kliknij Zaloguj się. Teraz w zależności od tego, co się stało, zobaczysz różne komunikaty.

  4. Wypróbuj różne sposoby pomagania użytkownikom w wpisywaniu adresów e-mail i haseł. Ulepszone pola w formularzu haseł zapewniają sprytne sugestie.

    Oto jak Twój kod powinien wyglądać w tym punkcie:

Pójdź o krok dalej

Nie znajdziesz ich w tym ćwiczeniu z programowania, ale i tak potrzebujesz tych 4 kluczowych funkcji formularza logowania:

  • Dodaj przycisk Nie pamiętasz hasła?, aby ułatwić użytkownikom resetowanie haseł.

  • Podaj link do warunków korzystania z usługi i polityki prywatności, aby użytkownicy wiedzieli, jak chronisz ich dane.

  • Zastanów się nad stylem i elementami marki oraz zadbaj o to, aby te dodatkowe funkcje pasowały do reszty Twojej witryny.

  • Dodaj Analytics i RUM, aby móc testować i monitorować wydajność oraz użyteczność projektu formularza.