Codelab: Best Practices für Anmeldeformulare

Dutton

In diesem Codelab erfahren Sie, wie Sie ein sicheres, leicht zugängliches 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 können.

  • Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.

Sehen Sie sich den HTML-Code für Ihr Formular in index.html an. Sie sehen nun Eingaben für Name, E-Mail-Adresse und Passwort. Jede befindet sich in einem Abschnitt und jede hat ein Label. Die Schaltfläche Anmelden ist... ein <button>! Später in diesem Codelab lernen Sie die besonderen Fähigkeiten 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 zu sehen. Hier sehen Sie, wie ein Formular ohne anderen CSS-Code als die Standardbrowserstile aussieht.

  • Sehen die Standardstile in Ordnung aus? Was würden Sie ändern, damit das Formular besser aussieht?
  • Funktionieren die Standardstile einwandfrei? Welche Probleme können auftreten, wenn Sie das Formular in der vorliegenden Form verwenden? Wie sieht es mit der mobilen Plattform aus? Was ist mit Screenreadern und anderen Hilfstechnologien?
  • Wer sind Ihre Nutzer und auf welche Geräte und Browser richten Sie Ihre Anzeigen ein?

Formular testen

Sie könnten eine Menge Hardware erwerben und ein Gerätelabor einrichten. Es gibt jedoch günstigere und einfachere Möglichkeiten, das Formular in verschiedenen Browsern, Plattformen und Geräten zu testen:

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

  • Sie können Ihr Formular im Gerätemodus der Chrome-Entwicklertools auf verschiedenen Geräten testen.
  • Öffnen Sie das Formular jetzt auf einem Smartphone oder einem anderen echten Gerät. Welche Unterschiede sehen Sie?

Schritt 2: CSS hinzufügen, damit das Formular besser funktioniert

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

Mit dem HTML-Code ist bisher nichts auszusetzen, aber Sie müssen sicherstellen, dass Ihr Formular für eine Reihe von Nutzern auf Mobilgeräten und Desktop-Computern gut funktioniert.

In diesem Schritt fügen Sie CSS hinzu, um das Formular nutzerfreundlicher zu machen.

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 Anmeldeformular mit benutzerdefiniertem Stil aufzurufen. Klicken Sie dann auf Quelltext anzeigen, um zu css/main.css zurückzukehren.

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

  • Passe padding, margin und font-size an deine Testgeräte an.

  • Das CSS ist Mobile-first. Medienabfragen werden verwendet, um CSS-Regeln auf Darstellungsbereiche anzuwenden, die mindestens 400px breit sind, und dann auf Darstellungsbereiche, die mindestens 500px breit sind. Sind diese Haltepunkte ausreichend? Wie sollten Sie Haltepunkte für Formulare auswählen?

Schritt 3: Attribute hinzufügen, um Nutzern die Eingabe von Daten zu erleichtern

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

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" verdeckt Text, wenn er eingegeben wird, und ermöglicht dem Passwortmanager des Browsers, ein starkes Passwort vorzuschlagen. * type="email" bietet eine einfache Validierung und sorgt dafür, 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 verschoben, da der for-Wert des Labels mit dem id der E-Mail-Eingabe übereinstimmt. Die anderen Beschriftungen und Eingaben funktionieren auf die gleiche Weise. Screenreader liest Labeltext auch vor, wenn das Label (oder die mit dem Label verknüpfte Eingabe) hervorgehoben wird. Sie können es mit der ChromeVox-Erweiterung ausprobieren.

Versuchen Sie, das Formular mit einem leeren Feld einzureichen. Der Browser sendet das Formular nicht, sondern fordert die Aufforderung auf, fehlende Daten zu vervollständigen, und legt den Fokus fest. Das liegt daran, dass Sie allen Eingaben das Attribut require hinzugefügt haben. Versuchen Sie nun, das Formular mit einem Passwort zu senden, das weniger als acht Zeichen umfasst. Der Browser warnt, dass das Passwort nicht lang genug ist, und legt den Fokus auf die Eingabe des Passworts aufgrund des Attributs minlength="8". Dasselbe gilt für pattern (wird für die Namenseingabe verwendet) und andere Validierungseinschränkungen. Dies geschieht 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) für das Passwort speichert. * autocomplete="new-password" für Passwort ist ein Hinweis für den Passwortmanager, dass er diesen Wert als Passwort für die aktuelle Website speichern soll. Anschließend können Sie autocomplete="current-password" verwenden, um die Funktion „Autofill“ in einem Anmeldeformular zu aktivieren. Das ist ein sign-up.

Schritt 4: Nutzer bei der Eingabe sicherer Passwörter unterstützen

Haben Sie beim Ausfüllen des Formulars einen Fehler bei der Passworteingabe festgestellt?

Es gibt zwei Probleme: * Es kann nicht festgestellt werden, ob es Beschränkungen für den Passwortwert gibt. * Sie können Ihr Passwort nicht sehen, um zu prüfen, ob Sie es richtig gemacht haben.

Lassen Sie die Nutzenden 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 die Eingabe von Passwörtern erleichtern:

  • Eine Schaltfläche (eigentlich nur Text), um die Passwortanzeige ein-/auszuschalten. Die Schaltfläche wird mit JavaScript hinzugefügt.
  • Ein aria-label-Attribut für die Schaltfläche zum Wechseln des Passworts.
  • Ein aria-describedby-Attribut für die Passworteingabe. Screenreader lesen den Labeltext, den Eingabetyp (Passwort) und anschließend die Beschreibung.

Um die Schaltfläche zum Ein-/Ausschalten des Passworts zu aktivieren und Nutzern Informationen zu Passwortbeschränkungen anzuzeigen, kopieren Sie den gesamten JavaScript-Code unten und fügen Sie ihn in Ihre eigene js/main.js-Datei ein.

Das Preisvergleichsportal ist bereits aus Schritt 2 vorhanden. Hier sehen Sie, wie die Schaltfläche zum Ein-/Ausschalten des Passworts gestaltet und positioniert ist.

  • Funktioniert ein Symbol besser als Text, um die Passwortanzeige umzuschalten? Probieren Sie Rabatte zur Nutzererfahrung mit einer kleinen Gruppe von Freunden oder Kollegen aus.

  • Installieren Sie die ChromeVox-Erweiterung und navigieren Sie durch das Formular, um zu erfahren, wie Screenreader mit Formularen funktionieren. Könnten Sie das Formular nur mit ChromeVox ausfüllen? Wenn nicht, was würden Sie ändern?

So sollte Ihr Formular an dieser Stelle aussehen:

Noch mehr

Einige wichtige Funktionen werden in diesem Codelab nicht behandelt:

  • Es wird nach gehackten Passwörtern gesucht. Sie sollten keine Passwörter zulassen, die gehackt wurden. Sie können und sollten einen Passwortcheck nutzen, um gehackte Passwörter zu erkennen. Sie können einen vorhandenen Dienst verwenden oder selbst einen Dienst auf Ihren eigenen Servern ausführen. Probier es gleich aus! Fügen Sie Ihrem Formular die Passwortprüfung hinzu.

  • Link zu den Nutzungsbedingungen und der Datenschutzerklärung: Erläutern Sie den Nutzern, wie Sie ihre Daten schützen.

  • Stil und Branding: Achten Sie darauf, dass diese zum Rest Ihrer Website passen. Nutzer müssen bei der Eingabe von Namen und Adressen und bei Zahlungen darauf vertrauen können, dass sie noch am richtigen Ort sind.

  • Analysen und echtes Nutzermonitoring: Ermögliche die Leistung und Nutzerfreundlichkeit deines Formulardesigns, um es für echte Nutzer zu testen und zu überwachen.