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

Sam Dutton

Z tego ćwiczenia w Codelabs dowiesz się, jak utworzyć bezpieczny, dostępny i łatwy w użyciu formularz logowania.

1. Używanie znaczących znaczników HTML

Użyj tych elementów utworzonych na potrzeby zadania:

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

Jak widać, te elementy umożliwiają korzystanie z wbudowanych funkcji przeglądarki, poprawiają dostępność i dodają znaczeń do znacznika.

  1. Kliknij Remix, aby edytować, aby umożliwić edycję projektu.

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

  3. Kliknij Wyświetl aplikację, aby wyświetlić podgląd formularza logowania. Dodany przez Ciebie kod HTML jest prawidłowy, ale domyślny styl przeglądarki sprawia, że wygląda on źle i jest trudny w użyciu, zwłaszcza na urządzeniach mobilnych.

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

2. Projektowanie z myślą o palcach i kciuki

Dostosuj wypeł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 całkiem sporo kodu. Najważniejsze zmiany dotyczą rozmiarów:

  • Użytkownicy padding i margin zostali dodani do listy uczestników.
  • font-size jest inny na komórkach i na komputerach.

Selektor :invalid wskazuje, że wartość wejściowa jest nieprawidłowa. To jeszcze nie działa.

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

  • Domyślny kod CSS jest przeznaczony do widocznych obszarów o szerokości mniejszej niż 450 pikseli.
  • Sekcja zapytań o multimedia ustawia zastąpienia dla widocznych obszarów o szerokości co najmniej 450 pikseli.

Gdy tworzysz własny formularz, na tym etapie bardzo ważne jest przetestowanie kodu na prawdziwych komputerach i urządzeniach mobilnych:

  • Czy etykiety i teksty są czytelne, zwłaszcza dla osób niedowidzących?
  • Czy pola tekstowe i przycisk Zaloguj się są wystarczająco duże, aby można było je dotykać kciukami?

3. Dodawanie atrybutów wejściowych w celu włączenia wbudowanych funkcji przeglądarki

Umożliwianie przeglądarce przechowywania i autouzupełniania wartości danych wejściowych oraz zapewnianie dostępu do wbudowanych funkcji zarządzania hasłami.

  1. Dodaj atrybuty do kodu HTML formularza, aby wyglądał 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. Ponownie otwórz aplikację i kliknij Wyślij e-maila.

    Zauważ, że fokus przenosi się na pole e-maila. Dzieje się tak, ponieważ etykieta jest powiązana z danymi wejściowymi za pomocą atrybutu for="email". Czytniki ekranu odczytują też tekst etykiety, gdy etykieta lub powiązane z nią pole tekstowe zostanie wybrane.

  3. Wyśrodkuj pole e-maila na urządzeniu mobilnym.

    Zwróć uwagę, że klawiatura jest zoptymalizowana pod kątem wpisywania adresu e-mail. Na przykład na klawiaturze głównej mogą być wyświetlane znaki @ i ., a system operacyjny może wyświetlać zapisane e-maile nad klawiaturą. Dzieje się tak, ponieważ 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 zastosowano atrybut type="password".

  • Atrybuty autocomplete, name, id i type pomagają przeglądarkom zrozumieć rolę danych wejściowych, aby przechowywać dane, które można później wykorzystać do autouzupełniania.
  1. Wpisz adres e-mail na komputerze. Po kliknięciu Pełny ekran Ikona pełnego ekranu możesz zobaczyć adres URL aplikacji. Jeśli w przeglądarce masz zapisane adresy e-mail, zobaczysz prawdopodobnie okno, w którym możesz wybrać jeden z nich. Dzieje się tak, ponieważ atrybut autocomplete="username" został zastosowany do pola adresu e-mail.
  • Parametry autocomplete="username" i autocomplete="current-password" pomagają przeglądarkom używać zapisanych wartości do automatycznego wypełniania pól.

Różne przeglądarki używają różnych metod do określania roli pól formularza i automatycznego wypełniania pól w różnych witrynach.

Aby to sprawdzić, dodaj i usuń atrybuty.

Bardzo ważne jest testowanie zachowań na różnych platformach. Wartości należy wpisać i przesłać formularz w różnych przeglądarkach na różnych urządzeniach. Testowanie na różnych platformach jest łatwe dzięki BrowserStack, które jest bezpłatne dla projektów open source. Wypróbuj

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

4. Dodanie interfejsu do przełączania widoczności hasła

Eksperci od użyteczności zdecydowanie zalecają dodanie ikony lub przycisku, który pozwoli użytkownikom zobaczyć tekst wpisany w polu Hasło. Nie ma wbudowanego sposobu na to, więc musisz to zrobić samodzielnie za pomocą kodu JavaScript.

Kod potrzebny 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 następujący 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 do pliku style.css ten kod 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 wyświetla się w prawym górnym rogu sekcji z hasłem.

  3. Dodaj do pliku script.js ten kod JavaScriptu, aby przełączać 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 logikę wyświetlania hasła.

    1. Wyświetl aplikację.

    2. Wpisz tekst w polu hasła.

    3. Kliknij Pokaż hasło.

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

Zastanów się nad projektem UX: czy użytkownicy zauważą przycisk Pokaż hasło i czy go zrozumieją? Czy istnieje lepszy sposób na realizację tej funkcji? To dobry moment, aby przeprowadzić testy użyteczności na ograniczonej grupie w małej grupie znajomych lub współpracowników.

Aby dowiedzieć się, jak ta funkcja działa w przypadku czytników ekranu, zainstaluj rozszerzenie klasycznego ChromeVoxa i przejrzyj formularz. Czy wartości aria-label działają zgodnie z oczekiwaniami?

Niektóre witryny, np. Gmail, używają ikon, a nie tekstu, do przełączania wyświetlania hasła. Po zakończeniu tego ćwiczenia zaimplementuj to za pomocą obrazów SVG. Material Design oferuje wysokiej jakości ikony, które możesz pobrać bezpłatnie.

Twój kod powinien wyglądać tak:

5. Dodawanie walidacji formularza

Możesz pomóc użytkownikom w prawidłowym wprowadzaniu danych, umożliwiając im ich weryfikację przed przesłaniem formularza i pokazywaniem, co należy zmienić.

Elementy i atrybuty formularza HTML mają wbudowane funkcje podstawowej walidacji, ale warto też używać JavaScriptu, aby przeprowadzać bardziej zaawansowaną walidację podczas wprowadzania przez użytkowników danych i próby przesłania formularza.

W tym kroku używasz interfejsu Constraint Validation API (który jest powszechnie obsługiwany), aby dodać weryfikację niestandardową z wbudowanym interfejsem przeglądarki, który ustawia fokus i wyświetla prompty.

Poinformuj użytkowników o ograniczeniach dotyczących haseł i innych danych wejściowych. Nie zmuszaj ich do zgadywania!

  1. Zaktualizuj sekcję dotyczącą 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" 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 dla pola tekstowego z hasłem (czytniki ekranu odczytują tekst etykiety, typ danych (hasło), a następnie opis).

  1. Dodaj do pliku style.css ten kod 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 nowsze przeglądarki mają wbudowane funkcje sprawdzania poprawności formularzy i obsługują sprawdzanie poprawności za pomocą JavaScript.

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

    2. Wpisz prawidłowy adres e-mail, ale nie wpisuj hasła, tylko kliknij Zaloguj się. Przeglądarka ostrzeże, że brakuje wymaganej wartości, i ustawi fokus na polu hasła.

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

  4. Wypróbuj różne sposoby na ułatwienie użytkownikom wpisywania adresów e-mail i haseł. Ulepszone pola formularza hasła zawierają sprytne sugestie.

    Twój kod powinien wyglądać tak:

Idź dalej

Nie są one opisane w tym ćwiczeniu, ale i tak musisz znać te 4 kluczowe funkcje formularza logowania:

  • Dodaj przycisk Nie pamiętasz hasła?, który ułatwi użytkownikom zresetowanie hasła.

  • Dodaj link do dokumentów z warunkami korzystania z usługi i polityką prywatności, aby użytkownicy wiedzieli, jak chronisz ich dane.

  • Weź pod uwagę styl i markę oraz upewnij się, że te dodatkowe funkcje pasują do reszty witryny.

  • Dodaj Google Analytics i RUM, aby testować i monitorować skuteczność oraz użyteczność projektu formularza.