Codelab: Best Practices für Anmeldeformulare

Sam Dutton

Hier erfahren Sie, wie Sie ein Registrierungsformular erstellen, das sicher, barrierefrei und benutzerfreundlicher ist. Das fertige Formular ist in CodePen verfügbar.

1. Sinnvolles HTML verwenden

Hier erfahren Sie, wie Sie Formularelemente verwenden, um die integrierten Browserfunktionen optimal zu nutzen.

  1. Neuen Pen erstellen

  2. Kopieren Sie den folgenden Code und fügen Sie ihn in den HTML-Editor ein.

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

  3. Klicken Sie in die Live-Vorschau, um das HTML-Formular zu sehen. Es gibt Eingabefelder für Name, E-Mail-Adresse und Passwort. In diesem Formular wird nur das Standard-Browser-CSS verwendet.

Jede Eingabe befindet sich in einem Abschnitt und hat ein Label. Die Schaltfläche zur Registrierung ist wichtig und ein <button>. Später in diesem Codelab erfahren Sie mehr über die besonderen Funktionen dieser Elemente.

Stellen Sie sich folgende Fragen:

  • Sehen die Standardstile gut aus? Was würden Sie ändern, damit das Formular besser aussieht?
  • Funktionieren die Standardstile wie erwartet? Welche Probleme könnten bei der Verwendung des Formulars in seiner aktuellen Form 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 jedoch günstigere und einfachere Möglichkeiten, Ihr Formular in verschiedenen Browsern, auf verschiedenen Plattformen und auf verschiedenen Geräten zu testen:

Öffnen Sie die Live-Ansicht Ihres CodePen oder unsere Live-Ansicht. 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?

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

Bisher ist mit dem HTML 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 benutzerfreundlicher zu gestalten. Kopieren Sie dieses CSS und fügen Sie es in die Datei css/main.css ein.

Klicken Sie in die Vorschau, um das gestaltete Registrierungsformular zu sehen.

Funktioniert dieses CSS in verschiedenen Browsern und bei verschiedenen Bildschirmgrößen?

  • Passen Sie padding, margin und font-size an Ihre Testgeräte an.
  • Das CSS ist für Mobilgeräte optimiert. Verwenden Sie Medienabfragen, 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?

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

Fügen Sie Ihren Eingabeelementen Attribute hinzu, damit der Browser Formularfeldwerte speichern und automatisch ausfüllen kann und Sie auf Felder mit fehlenden oder ungültigen Daten hingewiesen werden.

Aktualisieren Sie Ihr HTML, sodass 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 für Folgendes zuständig:

  • type="password" verschleiert eingegebenen Text und ermöglicht es dem Passwortmanager des Browsers, ein starkes Passwort vorzuschlagen.
  • type="email" bietet eine grundlegende Validierung und sorgt dafür, dass Mobilgerätenutzern eine geeignete Tastatur angezeigt wird.

Klicken Sie in der Vorschau 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.

Versuchen Sie, das Formular mit einem leeren Feld zu senden. Der Browser sendet das Formular nicht ab, sondern fordert Sie auf, fehlende Daten einzugeben, und setzt den Fokus. Das liegt daran, dass wir allen Eingaben das Attribut require 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, aber was ist mit den anderen Eingaben?

  • autocomplete="username" für die Eingabe E-Mail-Adresse 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 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 autocomplete="current-password" verwenden, um das automatische Ausfüllen in einem Anmeldeformular zu aktivieren. Denken Sie daran, dass dies ein Registrierungsformular ist.

4. Nutzern helfen, sichere Passwörter einzugeben

Ist Ihnen etwas Ungewöhnliches bei der Passworteingabe aufgefallen? Es gibt zwei Probleme:

  • Es gibt keine Möglichkeit, herauszufinden, 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 displays your password on the screen.">
  Show password</button>
  <input id="password" name="password" type="password" minlength="8"
  autocomplete="new-password" 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) zum Ein-/Ausblenden des Passworts. 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 JavaScript-Code und fügen Sie ihn in den JavaScript-Editor ein.

  • Wäre ein Symbol besser als Text, um die Passwortanzeige zu aktivieren/deaktivieren? Führen Sie mit einer kleinen Gruppe von Freunden oder Kollegen einen Usability-Test mit geringem Budget 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?

Weitere Informationen

In diesem Codelab werden mehrere 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 Dienst zum Prüfen von Passwörtern verwenden, um gehackte Passwörter zu erkennen.

  • Link zu Ihren Nutzungsbedingungen und Datenschutzrichtlinien. Machen Sie Nutzern deutlich, wie Sie ihre Daten schützen.

  • Aktualisieren Sie das Design und die Marke Ihrer Formulare, damit sie zum Rest Ihrer Website passen. So können Nutzer sicher sein, dass sie sich an der richtigen Stelle befinden, wenn sie Namen und Adressen eingeben und insbesondere wenn sie Zahlungen vornehmen.

  • Fügen Sie Analytics und Real User Monitoring hinzu. Sie können die Leistung und Nutzerfreundlichkeit Ihres Formulardesigns von echten Nutzern testen und überwachen lassen.