Erstellen Sie ein Formular, mit dem Nutzer Adressdaten auf Computern und Mobilgeräten so einfach wie möglich eingeben können. Achten Sie darauf, dass das Formular die integrierten Browserfunktionen für Autofill, Validierung und Einschränkungen bei der Dateneingabe optimal nutzt.
Implementierung
Im Folgenden finden Sie die wichtigsten Richtlinien für die Erstellung erfolgreicher Adressformulare.
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".
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="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.
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 für jeden Schritt bis zur Kasse einen aussagekräftigen Call-to-Action, der den Fortschritt zeigt und den nächsten Schritt deutlich macht. Bezeichnen Sie die Schaltfläche zum Senden im Formular für die Lieferadresse beispielsweise mit Weiter zur Zahlung statt mit Weiter oder Speichern.
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.
Verschiedene Adressformate zulassen
Beachten Sie beim Erstellen eines Adressformulars, dass es selbst innerhalb eines Landes verschiedene Adressformate geben kann. Stellen Sie keine Vermutungen über „normale“ Adressen an.
Verwenden Sie nach Möglichkeit ein einzelnes <textarea>-Element für die Adresse.
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
Dies ist die flexibelste Option für eine Vielzahl von lokalen und internationalen Adressformaten.
Wenn Ihr Datenmodell separate Adresszeilen erfordert, verwenden Sie ein <input> pro Zeile mit den autocomplete-Tokens address-line1, address-line2 (und bei Bedarf address-line3), damit Autofill weiterhin funktioniert. Teilen Sie die Adresse nicht auf Eingabefelder auf, die diese Tokens nicht enthalten, und machen Sie nur die erste Zeile erforderlich.
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
Nutzer davor bewahren, versehentlich Datenfelder zu übersehen
Fügen Sie Pflichtfeldern das Attribut required hinzu.
<input type="text" id="city" name="city" autocomplete="address-level2" required>
Fallback-Strategien
Autofill ist eine progressive Verbesserung. In Browsern, die Autofill nicht unterstützen, müssen Nutzer ihre Adressdaten manuell eingeben. Die semantischen HTML-Einschränkungen (z. B. type, inputmode und required) funktionieren weiterhin wie die Standardformularvalidierung.