Codelab: Best Practices für Anmeldeformulare

Sam Dutton

In diesem Codelab erfahren Sie, wie Sie ein Anmeldeformular erstellen, das sicher, zugänglich und nutzerfreundlich ist.

Schritt 1: Aussagekräftigen HTML-Code verwenden

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

  • Klicke auf Zum Bearbeiten Remix, 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. Jedes Element befindet sich in einem Abschnitt und hat jeweils ein Label. Die Schaltfläche Anmelden ist... ein <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 sich eine Vorschau des Anmeldeformulars anzusehen. Hier sehen Sie, wie ein Formular ohne CSS aussieht. Standardbrowserstile.

  • Sehen die Standardstile in Ordnung? Was würden Sie ändern, um das Formular ansprechender zu gestalten?
  • Funktionieren die Standardstile funktionieren? Welche Probleme können bei der Verwendung des Formulars auftreten? Was? über Mobilgeräte? Was ist mit Screenreadern und anderen assistiven Technologien?
  • Wer sind Ihre Nutzer und auf welche Geräte und Browser richten Sie Ihre Werbung aus?

Formular testen

Sie könnten jede Menge Hardware erwerben und ein device Lab, aber es gibt günstigere und einfachere Möglichkeiten, Ihr Formular in einer Reihe von Browsern, Plattformen und Geräten auszuprobieren:

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

  • Testen Sie Ihr Formular im 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, damit das Formular besser funktioniert

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

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

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 individuell gestaltete Anmeldeformular aufzurufen. Klicken Sie dann auf Quelltext anzeigen, um css/main.css

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

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

  • Das Preisvergleichsportal ist Mobile-first. Medienabfragen werden verwendet, um CSS-Regeln auf Darstellungsbereiche anzuwenden, die mindestens 400px breit sind. Darstellungsbereiche, die mindestens 500px breit sind. Sind diese Haltepunkte angemessen? Wie sollten Haltepunkte für Formulare ausgewählt werden?

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

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

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 sehr nützlich: * type="password" verdeckt Text bei der Eingabe und aktiviert die Passwortmanager, um ein starkes Passwort vorzuschlagen. * type="email" bietet eine grundlegende Validierung und stellt sicher, dass mobile Nutzer eine geeignete Tastatur erhalten. Ausprobieren es raus!

Klicken Sie auf App ansehen und dann auf das Label E-Mail. Was ändert sich? Der Fokus liegt auf der E-Mail. Eingabe, da das Label einen for-Wert hat, der mit id der E-Mail-Eingabe übereinstimmt. Die anderen Labels und Eingaben auf die gleiche Weise funktionieren. Screenreader hören Labeltext auch vor, wenn das Label (oder die zugehörige Eingabe) in den Fokus rückt. Sie können das über die ChromeVox-Erweiterung ausprobieren.

Versuchen Sie, das Formular mit einem leeren Feld einzureichen. Der Browser sendet das Formular nicht, sondern fordert Sie auf, vollständig fehlende Daten und legt den Fokus fest. Das liegt daran, dass Sie das Attribut require allen Eingaben. Versuchen Sie nun, das Passwort mit einem Passwort mit weniger als acht Zeichen zu senden. Der Browser warnt: Das Passwort ist zu kurz und der Fokus liegt auf der Passworteingabe aufgrund des minlength="8" . Dasselbe gilt für pattern (für die Namenseingabe verwendet) und andere Validierungseinschränkungen. Der Browser erledigt 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 der 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 (Nutzername!) zusammen mit dem Passwort. * autocomplete="new-password" für Passwort weist den Passwortmanager darauf hin, bieten Sie an, diesen Wert als Passwort für die aktuelle Website zu speichern. Sie können dann autocomplete="current-password", um die Autofill-Funktion in einem Anmeldeformular zu aktivieren. Zur Erinnerung: Anmeldeformular).

Schritt 4: Nutzern bei der Eingabe sicherer Passwörter helfen

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

Es gibt zwei Probleme: * Es lässt sich nicht feststellen, ob es Einschränkungen für den Passwortwert gibt. * Sie können das Passwort nicht sehen, um zu prüfen, ob es richtig ist.

Lassen Sie Nutzer nicht raten!

Geben Sie im Passwortbereich von index.html den folgenden Code ein:

<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 (nur Text) zum Ein-/Ausschalten der Passwortanzeige. Der Parameter wird mit JavaScript hinzugefügt.)
  • Ein aria-label-Attribut für die Passwort-Umschaltschaltfläche.
  • Ein aria-describedby-Attribut für die Passworteingabe. Screenreader den Labeltext, den Eingabetyp (Passwort) und dann die Beschreibung lesen.

Wenn Sie die Passwort-Umschaltschaltfläche aktivieren und Nutzern Informationen zu Passwortbeschränkungen anzeigen möchten, kopieren Sie den gesamten unten stehenden JavaScript-Code und fügen Sie ihn in Ihre eigene js/main.js-Datei ein.

(Die CSS-Datei ist bereits in Schritt 2 vorhanden. Hier siehst du, wie die Passwort-Umschalt-Schaltfläche und positioniert werden.)

  • Würde sich ein Symbol besser als Text eignen, Passwortanzeige ein-/ausschalten? Rabatttests für die Nutzerfreundlichkeit ausprobieren mit einer kleinen Gruppe von Freunden oder Kollegen zu teilen.

  • Wenn Sie sich ansehen möchten, wie Screenreader mit Formularen arbeiten, installieren Sie die ChromeVox-Erweiterung und navigieren 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:

Weitere Möglichkeiten

In diesem Codelab werden einige wichtige Funktionen nicht behandelt:

  • Es wird nach gehackten Passwörtern gesucht. Sie sollten niemals Passwörter zulassen, die kompromittiert wurden. Sie können und sollten einen Passwortcheckdienst verwenden, um gehackte Passwörter zu erkennen. Sie können einen vorhandenen Dienst verwenden oder selbst einen auf Ihren eigenen Servern ausführen. Jetzt ausprobieren! Passwort hinzufügen zu Ihrem Formular hinzufügen.

  • Link zu Ihren Nutzungsbedingungen und Dokumenten mit Ihrer Datenschutzerklärung: Machen Sie deutlich, wie Sie um ihre Daten zu schützen.

  • Stil und Branding: Achten Sie darauf, dass diese Elemente zum Rest Ihrer Website passen. Beim Eingeben von Namen und Adressen und Zahlungen vornehmen, müssen sich die Nutzer wohlfühlen und darauf vertrauen können, dass sie am richtigen Ort sind.

  • Analytics und Monitoring echter Nutzer: ermöglichen es, die Leistung und Nutzerfreundlichkeit Ihres Formulardesigns mit echten Nutzenden zu testen und zu überwachen.