Codelab: Best Practices für Anmeldeformulare

Sam Dutton

In diesem Codelab erfahren Sie, wie Sie ein Registrierungsformular erstellen, das sicher, barrierefrei und einfach zu verwenden ist.

Schritt 1: Aussagekräftiges HTML verwenden

In diesem Schritt erfahren Sie, wie Sie Formularelemente verwenden, um die integrierten Browserfunktionen optimal zu nutzen.

  • Klicken Sie auf Remix to Edit (Remix zum Bearbeiten), um das Projekt bearbeitbar zu machen.

Sehen Sie sich den HTML-Code für Ihr Formular unter index.html an. Sie sehen Eingabefelder für Name, E‑Mail-Adresse und Passwort. Jede Frage 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 Funktionen 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 sich eine Vorschau des Registrierungsformulars anzusehen. Hier sehen Sie, wie ein Formular ohne CSS-Code außer den Standardbrowserstilen aussieht.

  • Sehen die Standardstile gut aus? Was würden Sie ändern, damit das Formular besser aussieht?
  • Funktionieren die Standardstile richtig? Welche Probleme könnten 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 welche Geräte und Browser sind Ihre Zielgruppe?

Formular testen

Sie könnten eine Menge Hardware kaufen und ein Gerätelabor einrichten. Es gibt aber auch gü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 sich eine Vorschau des Registrierungsformulars anzusehen.

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

Schritt 2: CSS hinzufügen, um das Formular zu optimieren

Klicken Sie auf Quelle ansehen, um zu Ihrem Quellcode zurückzukehren.

Bisher ist 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 vereinfachen.

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 gestaltete Registrierungsformular aufzurufen. Klicken Sie dann auf View Source (Quelle ansehen), um zu css/main.css zurückzukehren.

  • Funktioniert dieses CSS für verschiedene Browser und Bildschirmgrößen?

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

  • Das CSS ist für Mobilgeräte optimiert. Medienabfragen werden verwendet, um CSS-Regeln für Darstellungsbereiche mit einer Breite von mindestens 400px und dann noch einmal für Darstellungsbereiche mit einer Breite von mindestens 500px anzuwenden. Sind diese Breakpoints angemessen? Wie sollten Sie Breakpoints für Formulare auswählen?

Schritt 3: Attribute hinzufügen, um Nutzern die Dateneingabe zu erleichtern

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

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" verschleiert Text bei der Eingabe und ermöglicht es dem Passwortmanager des Browsers, ein starkes Passwort vorzuschlagen. * type="email" bietet eine grundlegende Validierung und sorgt dafür, dass Mobilgerätenutzer 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 verschoben, da das Label einen for-Wert hat, der mit dem id der E-Mail-Eingabe übereinstimmt. Die anderen Labels und Eingaben funktionieren auf dieselbe Weise. Screenreader lesen auch den Labeltext vor, wenn das Label (oder die zugehörige Eingabe) den Fokus erhält. Sie können das mit der ChromeVox-Erweiterung ausprobieren.

Versuchen Sie, das Formular mit einem leeren Feld einzureichen. Der Browser sendet das Formular nicht ab, sondern fordert Sie auf, fehlende Daten einzugeben, und setzt den Fokus. Das liegt daran, dass Sie das Attribut require allen Eingaben hinzugefügt haben. Versuchen Sie nun, ein Passwort mit weniger als acht Zeichen einzugeben. Der Browser warnt, dass das Passwort nicht lang genug ist, und setzt den Fokus aufgrund des minlength="8"-Attributs auf die Passworteingabe. Das funktioniert auch für pattern (für die Namenseingabe) und andere Validierungseinschrä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. Was ist aber mit den anderen Eingaben? * autocomplete="username" für die Eingabe E-Mail bedeutet, dass der Passwortmanager des Browsers die E-Mail-Adresse als „Name“ für diesen Nutzer (den Nutzernamen!) zusammen mit dem Passwort speichert. * autocomplete="new-password" für Password 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 autocomplete="current-password" verwenden, um die automatische Vervollständigung in einem Anmeldeformular zu aktivieren (denken Sie daran, dass es sich um ein Registrierungsformular handelt).

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

Ist Ihnen mit dem Formular, wie es ist, etwas an der Passworteingabe aufgefallen?

Es gibt zwei Probleme: * Es ist nicht ersichtlich, 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 bei der Eingabe von Passwörtern helfen:

  • Eine Schaltfläche (eigentlich nur Text), um die Passwortanzeige zu aktivieren oder zu deaktivieren. (Die Schaltflächenfunktion wird mit JavaScript hinzugefügt.)
  • Ein aria-label-Attribut für die Schaltfläche zum Einblenden/Ausblenden 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 Ein- und Ausblenden des Passworts aktivieren und Nutzern Informationen zu den Passwortanforderungen anzeigen möchten, kopieren Sie den gesamten JavaScript-Code unten und fügen Sie ihn in Ihre eigene js/main.js-Datei ein.

Das CSS 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 als Text, um die Passwortanzeige zu aktivieren/deaktivieren? Führen Sie Usability-Tests mit geringem Budget 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 navigieren Sie durch das Formular. Könnten Sie das Formular nur mit ChromeVox ausfüllen? Wenn nicht, was würden Sie ändern?

So sollte Ihr Formular jetzt aussehen:

Weitere Informationen

In diesem Codelab werden mehrere wichtige Funktionen nicht behandelt:

  • Auf kompromittierte Passwörter prüfen. Sie sollten niemals kompromittierte Passwörter zulassen. Sie können (und sollten) einen Dienst zum Prüfen von Passwörtern 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 Datenschutzerklärungen: Machen Sie Nutzern deutlich, wie Sie ihre Daten schützen.

  • Stil und Branding: Diese sollten zum Rest Ihrer Website passen. Wenn Nutzer Namen und Adressen eingeben und Zahlungen vornehmen, müssen sie sich sicher fühlen und darauf vertrauen, dass sie sich noch auf der richtigen Website befinden.

  • Analyse und Real User Monitoring: Damit können Sie die Leistung und Nutzerfreundlichkeit Ihres Formulardesigns für echte Nutzer testen und überwachen.