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 erfahren Sie mehr über die besonderen Fähigkeiten all dieser Elemente.

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

  • Sind 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? Wie sieht es mit Screenreadern oder anderen Hilfstechnologien aus?
  • Wer sind Ihre Nutzer und auf welche Geräte und Browser möchten Sie Ihre Anzeigen ausrichten?

Formular testen

Sie könnten eine Menge 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 sehen Sie?

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 das Formular nutzerfreundlicher zu gestalten.

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 „mobile first“. 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 die Eingabe von Daten erleichtern

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

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 haben viele Funktionen: * type="password" blendet den eingegebenen Text aus und ermöglicht es dem Passwortmanager des Browsers, ein starkes Passwort vorzuschlagen. * type="email" bietet eine grundlegende Validierung und sorgt dafür, dass mobile Nutzer eine geeignete Tastatur erhalten. Probier es einfach mal 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 aufgrund des minlength="8"-Attributs den Fokus auf die Passworteingabe. Dasselbe gilt für pattern (für die Eingabe des Namens) und andere Gültigkeitsbeschränkungen. Der Browser erledigt das alles automatisch, ohne dass zusätzlicher Code erforderlich ist.

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 die Eingabe 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. Anschließend können Sie mit autocomplete="current-password" die Funktion „Autofill“ in einem Anmeldeformular aktivieren. Denken Sie daran, dass es sich um das Registrierungsformular handelt.

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

Ist Ihnen etwas an der Passworteingabe aufgefallen?

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 Funktionalität der Schaltfläche wird 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 vor.

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? Versuchen Sie, Usability-Tests zu reduzieren, indem Sie mit einer kleinen Gruppe von Freunden oder Kollegen zusammenarbeiten.

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

Ihr Formular sollte jetzt in etwa so 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 selbst 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 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.