Mit plattformübergreifenden Browserfunktionen ein Anmeldeformular erstellen

Dutton

In diesem Codelab erfahren Sie, wie Sie ein sicheres, leicht zugängliches und nutzerfreundliches Anmeldeformular erstellen.

1. Aussagekräftigen HTML-Code verwenden

Verwenden Sie diese für den Job erstellten Elemente:

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

Wie Sie sehen, ermöglichen diese Elemente integrierte Browserfunktionen, verbessern die Barrierefreiheit und verleihen Ihrem Markup Bedeutung.

  1. Klicke zum Bearbeiten auf „Remix“, damit das Projekt bearbeitet werden kann.

  2. Fügen Sie dem <body>-Element den folgenden Code hinzu:

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

    So sollte Ihre index.html-Datei an dieser Stelle aussehen:

  3. Klicken Sie auf App ansehen, um eine Vorschau des Anmeldeformulars zu sehen. Der HTML-Code, den Sie hinzugefügt haben, ist gültig und korrekt, aber aufgrund des Standard-Browserstils wirkt er ungünstig und schwer zu verwenden, insbesondere auf Mobilgeräten.

  4. Klicken Sie auf Quelltext anzeigen, um zu Ihrem Quellcode zurückzukehren.

2. Design für Finger und Daumen

Passen Sie Abstände, Ränder und Schriftgrößen an, damit Ihre Eingaben auf Mobilgeräten gut funktionieren.

  1. Kopieren Sie den folgenden CSS-Code und fügen Sie ihn in Ihre style.css-Datei ein:

  2. Klicken Sie auf App ansehen, um das neu gestaltete Anmeldeformular aufzurufen.

  3. Klicken Sie auf Quelltext anzeigen, um zu Ihrer style.css-Datei zurückzukehren.

Das ist ganz schön viel Code! Die wichtigsten Faktoren sind die Größenänderungen:

  • padding und margin werden den Eingaben hinzugefügt.
  • font-size unterscheidet sich auf Mobilgeräten und Computern.

Mit der Auswahl :invalid wird angegeben, wenn eine Eingabe einen ungültigen Wert enthält. Das funktioniert noch nicht.

Das CSS-Layout ist Mobile-First:

  • Der Standard-CSS-Code gilt für Darstellungsbereiche, die weniger als 450 Pixel breit sind.
  • Im Bereich für die Medienabfrage werden Überschreibungen für Darstellungsbereiche festgelegt, die mindestens 450 Pixel breit sind.

Wenn Sie Ihr eigenes Formular wie dieses erstellen, ist es an diesem Punkt des Prozesses sehr wichtig, den Code auf echten Geräten auf Computern und Mobilgeräten zu testen:

  • Sind Beschriftungen und Eingabetexte lesbar, insbesondere für Menschen mit eingeschränktem Sehvermögen?
  • Sind die Eingaben und die Schaltfläche Anmelden groß genug, um sie als Berührungsziel für Daumen zu verwenden?

3. Eingabeattribute hinzufügen, um integrierte Browserfunktionen zu aktivieren

Aktivieren Sie den Browser, um Eingabewerte zu speichern und automatisch auszufüllen, und gewähren Sie Zugriff auf integrierte Funktionen zur Passwortverwaltung.

  1. Fügen Sie dem HTML-Formular Attribute hinzu, damit es wie folgt aussieht:

    <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. Rufen Sie die App noch einmal auf und klicken Sie auf E-Mail.

    Beachten Sie, wie sich der Fokus auf die E-Mail-Eingabe bewegt. Das liegt daran, dass das Label der Eingabe über das Attribut for="email" zugeordnet wird. Screenreader lesen den Labeltext auch vor, wenn das Label oder die zugehörige Eingabe hervorgehoben wird.

  3. Fokussierung der E-Mail-Eingabe auf einem Mobilgerät

    Die Tastatur ist für die Eingabe einer E-Mail-Adresse optimiert. Beispielsweise können die Zeichen @ und . auf der primären Tastatur angezeigt werden und das Betriebssystem zeigt gespeicherte E-Mails möglicherweise oberhalb der Tastatur an. Der Grund dafür ist, dass das Attribut type="email" auf ein <input>-Element angewendet wird.

    Die Standardtastatur für E-Mails unter iOS.

  4. Geben Sie Text in das Passwort ein.

    Der Text ist standardmäßig ausgeblendet, weil das Attribut type="password" auf das Element angewendet wurde.

  • Die Attribute autocomplete, name, id und type helfen Browsern dabei, die Rolle von Eingaben zu verstehen, um Daten zu speichern, die später für die Autofill-Funktion verwendet werden können.
  1. Richten Sie die E-Mail-Eingabe auf einen Desktop-Computer aus und geben Sie Text ein. Die URL Ihrer App sehen Sie, wenn Sie auf Vollbild Das Vollbildsymbol klicken. Wenn Sie in Ihrem Browser E-Mail-Adressen gespeichert haben, wird wahrscheinlich ein Dialogfeld angezeigt, in dem Sie eine Auswahl aus diesen gespeicherten E-Mails treffen können. Dies liegt daran, dass das Attribut autocomplete="username" auf die E-Mail-Eingabe angewendet wird.
  • autocomplete="username" und autocomplete="current-password" helfen Browsern dabei, gespeicherte Werte für das automatische Ausfüllen von Eingaben zu verwenden.

Verschiedene Browser verwenden unterschiedliche Techniken, um die Rolle von Formulareingaben zu bestimmen und die Funktion zum automatischen Ausfüllen für eine Reihe verschiedener Websites bereitzustellen.

Sie können Attribute hinzufügen oder entfernen, um es selbst auszuprobieren.

Es ist äußerst wichtig, das Verhalten plattformübergreifend zu testen. Sie sollten Werte eingeben und das Formular in verschiedenen Browsern und auf unterschiedlichen Geräten senden. Mit BrowserStack können Sie ganz einfach Tests auf einer Reihe von Plattformen durchführen. BrowserStack ist für Open-Source-Projekte kostenlos. Jetzt testen

So sollte Ihre index.html-Datei an dieser Stelle aussehen:

4. UI zum Ein-/Ausschalten der Passwortanzeige hinzufügen

Usability-Experten empfehlen dringend, ein Symbol oder eine Schaltfläche hinzuzufügen, über die Nutzer den Text sehen können, den sie in das Feld Passwort eingeben. Dafür gibt es keine integrierte Methode. Sie müssen sie also selbst mit JavaScript implementieren.

Der Code zum Hinzufügen dieser Funktion ist unkompliziert. In diesem Beispiel wird Text und kein Symbol verwendet.

Aktualisieren Sie die Dateien index.html, style.css und script.js so.

  1. Fügen Sie dem Passwortabschnitt in der Datei index.html eine Ein/Aus-Schaltfläche hinzu:

    <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. Fügen Sie am Ende der Datei style.css den folgenden CSS-Code ein:

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

    Dadurch sieht die Schaltfläche Passwort anzeigen wie reiner Text aus und wird oben rechts im Passwortabschnitt angezeigt.

  3. Fügen Sie der Datei script.js folgenden JavaScript-Code hinzu, um die Passwortanzeige umzuschalten und das entsprechende aria-label festzulegen:

    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. Probiere die Passwortlogik jetzt aus.

    1. Rufen Sie Ihre App auf.

    2. Geben Sie Text in das Passwortfeld ein.

    3. Klicken Sie auf Passwort anzeigen.

  5. Wiederholen Sie den vierten Schritt in mehreren Browsern unter verschiedenen Betriebssystemen.

Denken Sie an das UX-Design: Wird Passwort anzeigen bemerken und verstehen? Gibt es eine bessere Möglichkeit, diese Funktion bereitzustellen? Das ist ein guter Moment, um mit einer kleinen Gruppe von Freunden oder Kollegen Rabatttests zur Nutzerfreundlichkeit durchzuführen.

Installieren Sie die ChromeVox Classic-Erweiterung und navigieren Sie durch das Formular, um zu verstehen, wie diese Funktion für Screenreader funktioniert. Funktionieren die aria-label-Werte wie vorgesehen?

Einige Websites, wie z. B. Gmail, verwenden Symbole anstelle von Text, um die Passwortanzeige ein- und auszuschalten. Wenn Sie mit diesem Codelab fertig sind, können Sie es mit SVG-Bildern implementieren. Material Design bietet hochwertige Symbole, die Sie kostenlos herunterladen können.

So sollte Ihr Code an dieser Stelle aussehen:

5. Formularvalidierung hinzufügen

Sie können Nutzern dabei helfen, ihre Daten korrekt einzugeben, wenn Sie ihnen erlauben, ihre Daten vor dem Senden des Formulars zu validieren, und ihnen zeigen, was sie ändern müssen.

HTML-Formularelemente und -attribute haben integrierte Funktionen für die grundlegende Validierung. Sie sollten jedoch auch JavaScript verwenden, um eine zuverlässigere Validierung durchzuführen, wenn Nutzer Daten eingeben und wenn sie das Formular senden möchten.

In diesem Schritt wird die weitgehend unterstützte Constraint Validation API verwendet, um eine benutzerdefinierte Validierung mit einer integrierten Browser-Benutzeroberfläche hinzuzufügen, die den Fokus festlegt und Aufforderungen anzeigt.

Informieren Sie die Nutzer über die Beschränkungen für Passwörter und andere Eingaben. Lassen Sie sie nicht erraten!

  1. Aktualisieren Sie den Passwortabschnitt der Datei 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>

Das hat zwei neue Funktionen:

  • Informationen zu Passwortbeschränkungen
  • Ein aria-describedby-Attribut für die Passworteingabe. Screenreader lesen den Labeltext, den Eingabetyp (Passwort) und dann die Beschreibung vor.

  1. Fügen Sie am Ende der Datei style.css den folgenden CSS-Code ein:

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

  2. Fügen Sie der Datei script.js folgenden JavaScript-Code hinzu:

    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. Jetzt testen

    Alle aktuellen Browser verfügen über integrierte Funktionen für die Formularvalidierung und unterstützen die Validierung mit JavaScript.

    1. Gib eine ungültige E-Mail-Adresse ein und klicke auf Anmelden. Der Browser zeigt eine Warnung an: kein JavaScript erforderlich.

    2. Geben Sie eine gültige E-Mail-Adresse ein und klicken Sie dann auf Anmelden ohne Passwort. Der Browser warnt, dass Sie einen erforderlichen Wert übersehen haben, und legt den Fokus auf die Eingabe des Passworts.

    3. Geben Sie ein ungültiges Passwort ein und klicken Sie auf Anmelden. Je nachdem, wo das Problem liegt, sehen Sie jetzt unterschiedliche Meldungen.

  4. Probieren Sie verschiedene Möglichkeiten aus, um Nutzern bei der Eingabe von E-Mail-Adressen und Passwörtern zu helfen. Bessere Passwort-Formularfelder bieten einige clevere Vorschläge.

    So sollte Ihr Code an dieser Stelle aussehen:

Mehr erfahren

Sie werden in diesem Codelab nicht angezeigt, aber Sie benötigen dennoch die folgenden vier wichtigen Funktionen für das Anmeldeformular:

  • Fügen Sie die Schaltfläche Passwort vergessen? hinzu, mit der Nutzer ihre Passwörter ganz einfach zurücksetzen können.

  • Erstellen Sie einen Link zu Ihren Nutzungsbedingungen und Ihrer Datenschutzerklärung, damit Ihre Nutzer wissen, wie Sie ihre Daten schützen.

  • Berücksichtigen Sie Stil und Branding und achten Sie darauf, dass diese zusätzlichen Funktionen zum Rest Ihrer Website passen.

  • Fügen Sie Analytics und RUM hinzu, damit Sie die Leistung und Nutzerfreundlichkeit Ihres Formulardesigns testen und überwachen können.