Verwenden Sie plattformübergreifende Browserfunktionen, um sichere, barrierefreie und nutzerfreundliche Anmeldeformulare zu erstellen.
Wenn sich Nutzer auf Ihrer Website anmelden müssen, ist ein gutes Design des Anmeldeformulars entscheidend. Das gilt insbesondere für Nutzer mit schlechter Verbindung, auf Mobilgeräten, in Eile oder unter Stress. Schlecht gestaltete Anmeldeformulare führen zu hohen Absprungraten. Jeder Absprung kann einen verlorenen Kunden und einen verärgerten Nutzer bedeuten – nicht nur eine verpasste Gelegenheit zur Anmeldung.
Implementierung
Im Folgenden finden Sie die wichtigsten Richtlinien für die Erstellung erfolgreicher Anmeldeformulare.
Aussagekräftigen, gültigen HTML-Code verwenden
Nutzen Sie die Elemente und Attribute, die für die Erstellung von Formularen vorgesehen sind:
<form>,<input>,<label>und<button>type,autocompleteundinputmode
Diese ermöglichen integrierte Browserfunktionen, verbessern die Barrierefreiheit und verleihen dem Markup Bedeutung.
Verwenden Sie das <label>-Element, um Formularfelder für die Dateneingabe zu kennzeichnen.
Verwenden Sie zum Labeln von <input>, <select> oder <textarea> ein <label>. Verknüpfen Sie ein Label mit einer Eingabe, indem Sie dem for-Attribut des Labels denselben Wert wie dem id-Attribut der Eingabe zuweisen.
HTML-Attribute optimal nutzen
Erleichtern Sie Nutzern die Dateneingabe, indem Sie das entsprechende <type>-Attribut des <input>-Elements verwenden, um auf Mobilgeräten die richtige Tastatur bereitzustellen und eine grundlegende integrierte Validierung durch den Browser zu ermöglichen.
Verwenden Sie für E-Mail-Adressen immer type="email" und für Telefonnummern immer type="tel".
Jedes <input>-, <select>- und <textarea>-Element SOLLTE ein entsprechendes autocomplete-Attribut haben, um die Barrierefreiheit zu verbessern und Nutzern die erneute Eingabe von Daten zu ersparen.
Die Eingaben für Nutzername und E‑Mail-Adresse enthalten Kennungen, keinen Fließtext. Fügen Sie spellcheck="false" hinzu, damit der Browser sie nicht in etwas umschreibt, das nicht mit dem Konto übereinstimmt. autocorrect und autocapitalize sind für input type="email" immer deaktiviert, aber für Nutzernamen, die keine E-Mail-Adressen sind, erforderlich.
Hilfreiche Schaltflächen
Verwenden Sie <button> für Schaltflächen. Du kannst auch <input type="submit"> verwenden, aber kein div oder ein anderes zufälliges Element, das als Schaltfläche fungiert. Schaltflächenelemente bieten barrierefreie Funktionen, integrierte Funktionen zum Senden von Formularen und können einfach gestaltet werden.
Geben Sie jeder Schaltfläche zum Senden eines Formulars einen Wert, der beschreibt, was sie tut. Verwenden Sie ein klares, erkennbares Label. Verwenden Sie beispielsweise Anmelden anstelle von Weiter oder Senden.
Verwenden Sie nach Möglichkeit ein einzelnes Eingabefeld für den Namen.
Ermöglichen Sie Ihren Nutzern, ihren Namen in einem einzigen Eingabefeld einzugeben, es sei denn, Sie haben einen guten Grund, Vornamen, Nachnamen, Anreden oder andere Namensteile separat zu speichern. Durch die Verwendung eines einzigen Namenseingabefelds werden Formulare weniger komplex, das Ausschneiden und Einfügen wird ermöglicht und Autofill wird vereinfacht.
Internationale Namen zulassen. Verwenden Sie zur Validierung keine regulären Ausdrücke, die nur mit lateinischen Zeichen übereinstimmen. Bei der Option „Nur lateinische Zeichen“ werden Nutzer mit Namen oder Adressen ausgeschlossen, die Zeichen enthalten, die nicht im lateinischen Alphabet enthalten sind. Erlauben Sie stattdessen den Abgleich von Unicode-Buchstaben und sorgen Sie dafür, dass Ihr Backend Unicode sowohl als Eingabe als auch als Ausgabe sicher unterstützt. Unicode in regulären Ausdrücken wird von modernen Browsern gut unterstützt.
Anmeldefortschritt anzeigen
Verwenden Sie für jeden Schritt bis zur Anmeldung Seitenüberschriften und beschreibende Schaltflächenwerte, die deutlich machen, was jetzt zu tun ist und was der nächste Schritt ist.
Verwenden Sie das Attribut enterkeyhint für Formulareingaben, um das Label für die Eingabetaste auf der mobilen Tastatur festzulegen. Verwenden Sie beispielsweise enterkeyhint="previous" und enterkeyhint="next" in einem mehrseitigen Formular, enterkeyhint="done" für die letzte Eingabe im Formular und enterkeyhint="search" für eine Sucheingabe.
Nutzer müssen Anmeldedaten nicht noch einmal eingeben
Fügen Sie in Anmeldeformularen die entsprechenden autocomplete-Werte hinzu.
So können Browser Nutzer unterstützen, indem sie Anmeldedaten sicher speichern und Formulardaten korrekt eingeben. Ohne die automatische Vervollständigung ist es wahrscheinlicher, dass Nutzer ihre Anmeldedaten physisch aufzeichnen oder unsicher auf ihrem Gerät speichern.
Sorgfältig validieren
Validieren Sie die Dateneingabe sowohl in Echtzeit als auch vor dem Senden des Formulars. Verwenden Sie type="email" für E-Mail-Eingaben. Das Format wird vom Browser automatisch validiert. Fügen Sie Pflichtfeldern das Attribut required hinzu, um zu verhindern, dass leere Formulare gesendet werden.
Anmeldung in einem eigenen <form>-Element platzieren
Verwende immer das <form>-Element, wenn Nutzer Daten eingeben sollen.
Verpacken Sie Eingaben nicht in ein <div>-Element und verarbeiten Sie die Eingabedaten ausschließlich mit JavaScript. Im Allgemeinen ist es besser, ein <form>-Element zu verwenden. Dadurch wird Ihre Website für Screenreader und andere Hilfsmittel zugänglich, es werden verschiedene integrierte Browserfunktionen aktiviert, die Erstellung einer grundlegenden funktionalen Anmeldung für ältere Browser wird vereinfacht und die Website kann auch dann funktionieren, wenn JavaScript fehlschlägt.
Keine doppelten Eingaben
Auf einigen Websites müssen Nutzer ihre E‑Mail-Adresse oder ihr Passwort zweimal eingeben. Das kann zwar bei einigen Nutzern Fehler reduzieren, bedeutet aber für alle Nutzer zusätzlichen Aufwand und erhöht die Abbruchrate. Es ist auch nicht sinnvoll, zweimal zu fragen, wenn Browser E-Mail-Adressen automatisch ausfüllen oder starke Passwörter vorschlagen. Es ist besser, Nutzern die Möglichkeit zu geben, ihre E-Mail-Adresse zu bestätigen (das müssen Sie ohnehin tun) und ihr Passwort bei Bedarf einfach zurückzusetzen.
Passwörter geheim halten, aber Nutzern die Möglichkeit geben, sie bei Bedarf einzusehen
Passworteingaben sollten type="password" enthalten, um den Passworttext auszublenden und dem Browser zu signalisieren, dass es sich um eine Passworteingabe handelt. Browser verwenden verschiedene Techniken, um Eingaberollen zu verstehen und zu entscheiden, ob sie das Speichern von Passwörtern anbieten sollen.
Sie sollten die Option Passwort anzeigen hinzufügen, damit Nutzer den eingegebenen Text überprüfen können. Vergessen Sie auch nicht, den Link Passwort vergessen hinzuzufügen.
Nutzern von Mobilgeräten die richtige Tastatur zur Verfügung stellen
Verwenden Sie <input type="email">, um Nutzern von Mobilgeräten eine geeignete Tastatur zur Verfügung zu stellen und eine grundlegende integrierte Validierung von E-Mail-Adressen durch den Browser zu ermöglichen – ganz ohne JavaScript.
Wenn Sie eine Telefonnummer anstelle einer E‑Mail-Adresse verwenden müssen, wird mit <input type="tel"> auf Mobilgeräten ein Tastenfeld aktiviert. Bei Bedarf können Sie auch das Attribut inputmode verwenden: inputmode="numeric" eignet sich ideal für PINs.
Verhindern, dass die mobile Tastatur die Schaltfläche „Anmelden“ verdeckt
Wenn Sie nicht aufpassen, kann es passieren, dass die Tastatur auf Mobilgeräten das Formular oder, noch schlimmer, die Schaltfläche „Anmelden“ teilweise verdeckt. Nutzer geben möglicherweise auf, bevor sie merken, was passiert ist.
Vermeiden Sie dies nach Möglichkeit, indem Sie oben auf der Anmeldeseite nur die Eingabefelder für die E‑Mail-Adresse (oder Telefonnummer) und das Passwort sowie die Schaltfläche „Anmelden“ anzeigen. Andere Inhalte darunter platzieren.
Nutzern helfen, die erneute Eingabe von Daten zu vermeiden
Sie können Browser dabei unterstützen, Daten korrekt im Browserspeicher zu speichern und Eingaben automatisch auszufüllen, damit Nutzer nicht daran denken müssen, E‑Mail-Adressen und Passwörter einzugeben. Das ist besonders auf Mobilgeräten wichtig und entscheidend für E‑Mail-Eingaben, die hohe Abbruchraten aufweisen. Dazu sind zwei Schritte erforderlich:
- Die Attribute
autocomplete,name,idundtypehelfen Browsern, die Rolle von Eingaben zu verstehen, um Daten zu speichern, die später für das automatische Ausfüllen verwendet werden können. Damit Daten für das automatische Ausfüllen gespeichert werden können, müssen Eingaben in modernen Browsern außerdem einen stabilenname- oderid-Wert haben (der nicht bei jedem Seitenaufbau oder jeder Websitebereitstellung zufällig generiert wird) und sich in einem<form>-Element mit einersubmit-Schaltfläche befinden. - Das Attribut
autocompletehilft Browsern, Eingaben mithilfe gespeicherter Daten korrekt automatisch auszufüllen.
Verwenden Sie für E‑Mail-Eingaben autocomplete="username", da username von Passwortmanagern in modernen Browsern erkannt wird. Sie sollten jedoch type="email" verwenden und können auch id="email" und name="email" verwenden. Verwenden Sie für Passworteingaben den entsprechenden autocomplete-Wert, damit Browser zwischen neuen und aktuellen Passwörtern unterscheiden können.
Verwenden Sie autocomplete="current-password" für ein vorhandenes Passwort
OBLIGATORISCH: Verwenden Sie autocomplete="current-password" für die Passworteingabe in einem Anmeldeformular. Dadurch wird der Browser angewiesen, das aktuelle Passwort zu verwenden, das er für die Website gespeichert hat.
Für ein Anmeldeformular:
<input type="password" autocomplete="current-password" id="current-password" …>
Browser erlauben, ein starkes Passwort vorzuschlagen
Moderne Browser verwenden Heuristiken, um zu entscheiden, wann die Benutzeroberfläche des Passwortmanagers angezeigt und ein starkes Passwort vorgeschlagen werden soll.
Dank der integrierten Passwortgeneratoren in Browsern müssen sich Nutzer und Entwickler keine Gedanken darüber machen, was ein „starkes Passwort“ ist. Da Browser Passwörter sicher speichern und bei Bedarf automatisch ausfüllen können, müssen sich Nutzer keine Passwörter merken oder eingeben. Wenn Sie Nutzer dazu ermutigen, die integrierten Passwortgeneratoren des Browsers zu verwenden, ist es wahrscheinlicher, dass sie ein eindeutiges, starkes Passwort auf Ihrer Website verwenden und ein Passwort nicht wiederverwenden, das an anderer Stelle kompromittiert werden könnte.
Nutzer davor bewahren, versehentlich Eingaben zu verpassen
OBLIGATORISCH: Fügen Sie das Attribut required sowohl dem E-Mail- als auch dem Passwortfeld hinzu. Moderne Browser fordern Nutzer automatisch auf, fehlende Daten einzugeben, und setzen den Fokus auf die entsprechenden Felder.
<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>
Einfügen von Passwörtern zulassen
Auf einigen Websites ist es nicht möglich, Text in Passworteingabefelder einzufügen.
Wenn das Einfügen von Passwörtern nicht erlaubt ist, verärgert das die Nutzer und führt dazu, dass sie sich Passwörter aussuchen, die leicht zu merken sind (und daher leichter zu knacken sind). Laut Organisationen wie dem National Cyber Security Centre im Vereinigten Königreich kann dies die Sicherheit sogar verringern. Nutzer merken erst, dass das Einfügen nicht zulässig ist, wenn sie versuchen, ihr Passwort einzufügen. Das Einfügen von Passwörtern zu verbieten, verhindert also keine Sicherheitslücken in der Zwischenablage.
Fallback-Strategien
Autofill ist eine progressive Verbesserung. In Browsern, die das automatische Ausfüllen nicht unterstützen, müssen Nutzer ihre Anmeldedaten manuell eingeben. Die semantischen HTML-Einschränkungen (z. B. type, inputmode und required) funktionieren weiterhin ordnungsgemäß, um Nutzereingaben zu validieren und die richtigen Bildschirmtastaturen bereitzustellen.