Codelab: Best Practices für Anmeldeformulare

Sam Dutton

In diesem Codelab erfahren Sie, wie Sie ein sicheres, barrierefreies und nutzerfreundliches Anmeldeformular erstellen.

Schritt 1: Aussagekräftigen HTML-Code verwenden

In diesem Schritt erfahren Sie, wie Sie mithilfe von Formularelementen die integrierten Browserfunktionen optimal nutzen.

  • Klicke auf Remix zum Bearbeiten, um das Projekt bearbeitbar zu machen.

Sehen Sie sich den HTML-Code für Ihr Formular in index.html an. Sie sehen Eingabefelder für Name, E-Mail-Adresse und Passwort. Jedes befindet sich in einem Abschnitt und hat ein Label. Die Schaltfläche Registrieren ist… eine <button>! Später in diesem Codelab lernen Sie die besonderen Kräfte all dieser Elemente kennen.

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

Klicken Sie auf App ansehen, um eine Vorschau des Anmeldeformulars aufzurufen. Hier sehen Sie, wie ein Formular ohne anderes CSS als die Standardbrowserstile aussieht.

  • Sehen die Standardstile in Ordnung? Was würden Sie ändern, um das Formular ansprechender zu gestalten?
  • Funktionieren die Standardstile? Welche Probleme können bei der Verwendung Ihres Formulars auftreten? Wie sieht es auf Mobilgeräten aus? Was gilt für Screenreader und andere assistive Technologien?
  • Wer sind Ihre Nutzer und auf welche Geräte und Browser möchten Sie Ihre Anzeigen ausrichten?

Formular testen

Sie könnten viel Hardware kaufen und ein Device Lab einrichten. Es gibt jedoch kostengünstigere und einfachere Möglichkeiten, Ihr Formular in verschiedenen Browsern, auf verschiedenen Plattformen und auf verschiedenen Geräten zu testen:

Klicken Sie auf App ansehen, um eine Vorschau des Anmeldeformulars aufzurufen.

  • Testen Sie Ihr Formular mit dem Gerätemodus der Chrome-Entwicklertools auf verschiedenen Geräten.
  • Öffnen Sie das Formular jetzt auf einem Smartphone oder einem anderen echten Gerät. Welche Unterschiede stellen Sie fest?

Schritt 2: CSS hinzufügen, um die Funktionsweise des Formulars zu verbessern

Klicken Sie auf Quellcode ansehen, um zum Quellcode zurückzukehren.

Mit dem HTML ist bisher alles in Ordnung, aber Sie müssen dafür sorgen, dass Ihr Formular für eine Vielzahl von Nutzern auf Mobilgeräten und Computern gut funktioniert.

In diesem Schritt fügen Sie CSS hinzu, um die Verwendung des Formulars zu erleichtern.

Kopieren Sie den folgenden CSS-Code und fügen Sie ihn in die Datei css/main.css ein:

Klicken Sie auf App ansehen, um das Formular zu sehen. Klicken Sie dann auf Quellcode ansehen, um zu css/main.css zurückzukehren.

  • Funktioniert dieses CSS für eine Vielzahl von Browsern und Bildschirmgrößen?

  • Passen Sie padding, margin und font-size an Ihre Testgeräte an.

  • Das CSS ist für Mobilgeräte optimiert. Mit Medienabfragen werden CSS-Regeln für Darstellungsbereiche mit einer Breite von mindestens 400px und dann noch einmal für Darstellungsbereiche mit einer Breite von mindestens 500px angewendet. Sind diese Grenzwerte ausreichend? Wie sollten Sie die Breakpoints für Formulare auswählen?

Schritt 3: Attribute hinzufügen, die Nutzern bei der Dateneingabe helfen

In diesem Schritt fügen Sie Ihren Eingabeelementen Attribute hinzu, damit der Browser Formularfeldwerte speichern und automatisch ausfüllen kann. Außerdem werden Sie bei Feldern mit fehlenden oder ungültigen Daten gewarnt.

Aktualisieren Sie die Datei index.html so, dass der Formularcode so aussieht:

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

Die type-Werte sind sinnvoll: * type="password" verdeckt Text bei der Eingabe und ermöglicht dem Passwortmanager des Browsers, ein starkes Passwort vorzuschlagen. * type="email" bietet eine grundlegende Validierung und stellt sicher, dass mobile Nutzer eine geeignete Tastatur erhalten. Probieren Sie es aus!

Klicken Sie auf App ansehen und dann auf das Label E-Mail. Was ändert sich? Der Fokus wird auf die E-Mail-Eingabe gelegt, da das Label einen for-Wert hat, der mit dem id der E-Mail-Eingabe übereinstimmt. Die anderen Labels und Eingaben funktionieren auf die gleiche Weise. Screenreader sprechen Labeltext auch an, wenn der Fokus auf das Label (oder die zugehörige Eingabe) gelegt wird. Sie können das mit der ChromeVox-Erweiterung ausprobieren.

Reichen Sie das Formular mit einem leeren Feld ein. Der Browser sendet das Formular nicht, sondern fordert den Nutzer auf, fehlende Daten anzugeben, und setzt den Fokus darauf. Das liegt daran, dass Sie allen Eingaben das Attribut require hinzugefügt haben. Versuchen Sie jetzt, ein Passwort mit weniger als acht Zeichen einzureichen. Der Browser warnt, dass das Passwort nicht lang genug ist, und legt den Fokus auf die Passworteingabe aufgrund des Attributs minlength="8" fest. Dasselbe gilt für pattern (für die Namenseingabe verwendet) und andere Validierungseinschränkungen. Der Browser erledigt all dies automatisch und erfordert keinen zusätzlichen Code.

Die Verwendung des autocomplete-Werts name für die Eingabe Vollständiger Name ist sinnvoll, aber was ist mit den anderen Eingaben? * autocomplete="username" für das Eingabefeld E-Mail bedeutet, dass der Passwortmanager des Browsers die E-Mail-Adresse als „Namen“ für diesen Nutzer (den Nutzernamen) zusammen mit dem Passwort speichert. * autocomplete="new-password" für Passwort ist ein Hinweis für den Passwortmanager, dass er anbieten soll, diesen Wert als Passwort für die aktuelle Website zu speichern. Sie können dann autocomplete="current-password" verwenden, um Autofill in einem Anmeldeformular zu aktivieren. Beachten Sie, dass dies das Anmeldeformular ist.

Schritt 4: Nutzer beim Eingeben sicherer Passwörter unterstützen

Ist das Formular so, wie es ist: Ist bei der Passworteingabe ein Fehler aufgetreten?

Es gibt zwei Probleme: * Es ist nicht möglich zu erkennen, ob es Einschränkungen für den Passwortwert gibt. * Sie können das Passwort nicht sehen, um zu prüfen, ob Sie es richtig eingegeben haben.

Lassen Sie Nutzer nicht raten!

Aktualisieren Sie den Passwortabschnitt von index.html mit dem folgenden Code:

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

Dadurch werden neue Funktionen hinzugefügt, die Nutzern das Eingeben von Passwörtern erleichtern:

  • Eine Schaltfläche (eigentlich nur Text), mit der die Passwortanzeige ein- und ausgeschaltet werden kann. Die Schaltflächenfunktionen werden mit JavaScript hinzugefügt.
  • Ein aria-label-Attribut für die Schaltfläche zum Aktivieren/Deaktivieren des Passworts.
  • Ein aria-describedby-Attribut für die Passworteingabe. Screenreader lesen den Labeltext, den Eingabetyp (Passwort) und dann die Beschreibung.

Wenn Sie die Schaltfläche zum Umschalten des Passworts aktivieren und Nutzern Informationen zu Passwortbeschränkungen anzeigen möchten, kopieren Sie das gesamte JavaScript unten und fügen Sie es in Ihre eigene js/main.js-Datei ein.

Das Preisvergleichsportal ist bereits aus Schritt 2 vorhanden. Sehen Sie sich an, wie die Schaltfläche zum Ein- und Ausblenden des Passworts gestaltet und positioniert ist.)

  • Wäre ein Symbol besser geeignet als Text, um die Passwortanzeige zu aktivieren oder zu deaktivieren? Führen Sie Rabatte auf Benutzerfreundlichkeit mit einer kleinen Gruppe von Freunden oder Kollegen durch.

  • Wenn Sie sehen möchten, wie Screenreader mit Formularen funktionieren, installieren Sie die ChromeVox-Erweiterung und gehen Sie durch das Formular. Können Sie das Formular nur mit ChromeVox ausfüllen? Wenn nicht, was würden Sie ändern?

Das Formular sollte nun folgendermaßen aussehen:

Weiterführende Informationen

In diesem Codelab werden einige wichtige Funktionen nicht behandelt:

  • Auf kompromittierte Passwörter prüfen Sie sollten niemals Passwörter zulassen, die gehackt wurden. Sie können (und sollten) einen Passwort-Check verwenden, um gehackte Passwörter zu erkennen. Sie können einen vorhandenen Dienst verwenden oder einen eigenen Dienst auf Ihren eigenen Servern ausführen. Jetzt ausprobieren! Fügen Sie Ihrem Formular eine Passwortprüfung hinzu.

  • Link zu Ihren Nutzungsbedingungen und Ihrer Datenschutzerklärung: Informieren Sie die Nutzer darüber, wie Sie ihre Daten schützen.

  • Stil und Branding: Achten Sie darauf, dass diese Elemente zum Rest Ihrer Website passen. Wenn Nutzer Namen und Adressen eingeben und eine Zahlung vornehmen, müssen sie sich sicher fühlen, dass sie sich noch an der richtigen Stelle befinden.

  • Analysen und Monitoring echter Nutzer: Mit dieser Funktion können Sie die Leistung und Nutzerfreundlichkeit Ihres Formulardesigns für echte Nutzer testen und beobachten.