Wie können Sie ein Formular entwerfen, das für eine Vielzahl von Namen und Adressformaten geeignet ist? Kleinere Formularfehler irritieren Nutzer und können dazu führen, dass sie Ihre Website verlassen oder den Kauf oder die Registrierung abbrechen.
In diesem Codelab erfahren Sie, wie Sie ein nutzerfreundliches, barrierefreies Formular erstellen, das für die meisten Nutzer gut funktioniert.
Schritt 1: HTML-Elemente und -Attribute optimal nutzen
Sie beginnen diesen Teil des Codelabs mit einem leeren Formular, nur mit einer Überschrift und einer Schaltfläche. Dann beginnen Sie, Eingaben hinzuzufügen. (CSS und ein wenig JavaScript sind bereits enthalten.)
Klicke auf Remix zum Bearbeiten, um das Projekt bearbeitbar zu machen.
Fügen Sie dem
<form>-Element ein Namensfeld mit dem folgenden Code hinzu:
<section>
<label for="name">Name</label>
<input id="name" name="name">
</section>
Das mag für nur ein Namesfeld kompliziert und repetitiv erscheinen, bietet aber bereits viele Möglichkeiten.
Sie haben die label mit der input verknüpft, indem Sie das for-Attribut der label mit dem name- oder id-Attribut der input abgeglichen haben. Wenn Sie auf ein Label tippen oder klicken, wird der Fokus auf die Eingabe gelegt. Dadurch ist das Ziel viel größer als die Eingabe selbst – was für Finger, Daumen und Mausklicks von Vorteil ist. Screenreader sprechen den Labeltext an, wenn der Fokus auf das Label oder die Eingabe des Labels gelegt wird.
Wie wäre es mit name="name"? Dies ist der Name, der den Daten aus dieser Eingabe zugeordnet ist (in diesem Fall „name“!), der beim Senden des Formulars an den Server gesendet wird. Wenn Sie ein name-Attribut einfügen, kann auch die FormData API auf die Daten dieses Elements zugreifen.
Schritt 2: Attribute hinzufügen, die Nutzern die Eingabe von Daten erleichtern
Was passiert, wenn Sie in Chrome auf das Eingabefeld Name tippen oder klicken? Sie sollten Vorschläge zur automatischen Vervollständigung sehen, die der Browser gespeichert hat, und die Vorschläge sollten für diese Eingabe aufgrund der name- und id-Werte geeignet sein.
Fügen Sie Ihrem Eingabecode jetzt autocomplete="name" hinzu, sodass er so aussieht:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name">
</section>
Laden Sie die Seite in Chrome neu und tippen oder klicken Sie auf das Eingabefeld Name. Welche Unterschiede stellen Sie fest?
Sie sollten eine kleine Änderung bemerken: Bei autocomplete="name" sind die Vorschläge jetzt bestimmte Werte, die zuvor in Formularinputs verwendet wurden, die auch autocomplete="name" hatten. Der Browser rät nicht nur, was angemessen sein könnte: Sie haben die Kontrolle. Außerdem sehen Sie die Option Verwalten…, mit der Sie die von Ihrem Browser gespeicherten Namen und Adressen ansehen und bearbeiten können.
Fügen Sie jetzt die Attribute zur Validierung von Einschränkungen
maxlength, pattern und required hinzu, damit Ihr Eingabecode so aussieht:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name"
maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>
maxlength="100"bedeutet, dass der Browser keine Eingaben mit mehr als 100 Zeichen zulässt.pattern="[\p{L} \-\.]+"verwendet einen regulären Ausdruck, der Unicode-Buchstaben, Bindestriche und Punkte (Punkte) zulässt. Das bedeutet, dass Namen wie Françoise oder Jörg nicht als ungültig eingestuft werden. Das ist nicht der Fall, wenn Sie den Wert\wverwenden, bei dem nur Zeichen aus dem lateinischen Alphabet zulässig sind.requiredbedeutet: „erforderlich“ Der Browser lässt die Übermittlung des Formulars ohne Daten für dieses Feld nicht zu. Wenn Sie versuchen, die Eingabe zu senden, wird eine Warnung angezeigt und die Eingabe hervorgehoben. Kein zusätzlicher Code erforderlich.
Wenn Sie testen möchten, wie das Formular mit und ohne diese Attribute funktioniert, geben Sie Daten ein:
- Geben Sie Werte ein, die nicht in das Attribut
patternpassen. - Reichen Sie das Formular mit einer leeren Eingabe ein. Die integrierte Browserfunktion warnt Sie, dass das Pflichtfeld leer ist, und setzt den Fokus darauf.
Schritt 3: Ihrem Formular ein flexibles Adressfeld hinzufügen
Um ein Adressfeld hinzuzufügen, fügen Sie Ihrem Formular den folgenden Code hinzu:
<section>
<label for="address">Address</label>
<textarea id="address" name="address" autocomplete="address"
maxlength="300" required></textarea>
</section>
Ein textarea ist die flexibelste Möglichkeit für Nutzer, ihre Adresse einzugeben. Außerdem eignet es sich hervorragend zum Kopieren und Einfügen.
Sie sollten das Adressformular möglichst nicht in Komponenten wie Straßenname und Hausnummer aufteilen. Erzwingen Sie nicht, dass Nutzer ihre Adresse in Felder einfügen, die keinen Sinn ergeben.
Fügen Sie jetzt Felder für Postleitzahl und Land oder Region hinzu. Der Einfachheit halber sind hier nur die ersten fünf Länder aufgeführt. Eine vollständige Liste finden Sie im ausgefüllten Adressformular.
<section>
<label for="postal-code">ZIP or postal code (optional)</label>
<input id="postal-code" name="postal-code"
autocomplete="postal-code" maxlength="20">
</section>
<section id="country-region">
<label for="">Country or region</label>
<select id="country" name="country" autocomplete="country"
required>
<option selected value="SPACER"> </option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
</select>
</section>
Sie sehen, dass Postleitzahl optional ist. Das liegt daran, dass in vielen Ländern keine Postleitzahlen verwendet werden.
Das Global Sourcebook enthält Informationen zu Adressformaten für 194 verschiedene Länder, einschließlich Beispieladressen. Anstelle von Land wird das Label Land oder Region verwendet, da einige Optionen aus der vollständigen Liste (z. B. das Vereinigte Königreich) trotz des autocomplete-Werts keine einzelnen Länder sind.
Schritt 4: Kunden die einfache Eingabe von Versand- und Rechnungsadressen ermöglichen
Sie haben bereits ein funktionsreiches Adressformular erstellt, aber was ist, wenn für Ihre Website mehr als eine Adresse erforderlich ist, z. B. für Versand und Abrechnung? Aktualisieren Sie Ihr Formular, damit Kunden Versand- und Rechnungsadressen eingeben können. Wie können Sie die Dateneingabe so schnell und einfach wie möglich gestalten, insbesondere wenn die beiden Adressen identisch sind? Im zugehörigen Artikel werden Methoden zur Verarbeitung mehrerer Adressen erläutert.
Achten Sie aber unbedingt darauf, die richtigen autocomplete-Werte zu verwenden.
Schritt 5: Telefonnummernfeld hinzufügen
Wenn Sie ein Eingabefeld für Telefonnummern hinzufügen möchten, fügen Sie dem Formular den folgenden Code hinzu:
<section>
<label for="tel">Telephone</label>
<input id="tel" name="tel" autocomplete="tel" type="tel"
maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
required>
</section>
Verwenden Sie für Telefonnummern eine einzelne Eingabe: Teilen Sie die Nummer nicht in Teile auf. Das erleichtert Nutzern die Eingabe von Daten oder das Kopieren und Einfügen, vereinfacht die Validierung und ermöglicht die automatische Ausfüllung durch Browser.
Es gibt zwei Attribute, die die Eingabe einer Telefonnummer für Nutzer verbessern können:
type="tel"sorgt dafür, dass mobile Nutzer die richtige Tastatur erhalten.- Mit
enterkeyhint="done"wird das Label der Eingabetaste der mobilen Tastatur festgelegt, um anzuzeigen, dass dies das letzte Feld ist und das Formular jetzt gesendet werden kann (Standard istnext).
Ihr ausgefülltes Adressformular sollte jetzt so aussehen:
- Testen Sie Ihr Formular auf verschiedenen Geräten. Auf welche Geräte und Browser möchten Sie Ihre Anzeigen ausrichten? Wie könnte das Formular verbessert werden?
Es gibt mehrere Möglichkeiten, Ihr Formular auf verschiedenen Geräten zu testen:
- Verwenden Sie den Gerätemodus in den Chrome-Entwicklertools, um Mobilgeräte zu simulieren.
- Senden Sie die URL von Ihrem Computer an Ihr Smartphone.
- Verwenden Sie einen Dienst wie BrowserStack, um auf einer Vielzahl von Geräten und Browsern zu testen.
Weiterführende Informationen
Analysen und Echtzeit-Monitoring: Mit dieser Funktion können Sie die Leistung und Nutzerfreundlichkeit Ihres Formulardesigns für echte Nutzer testen und überwachen und prüfen, ob Änderungen erfolgreich sind. Sie sollten die Ladeleistung und andere Web Vitals sowie Seitenanalysen (wie viel Anteil der Nutzer, die von Ihrem Adressformular abspringen, ohne es ausgefüllt zu haben, abspringen, oder wie viel Zeit Nutzer auf Ihren Adressformularseiten verbringen, beobachten?) sowie Interaktionsanalysen (mit welchen Seitenkomponenten interagieren und nicht) beobachten.
Wo befinden sich Ihre Nutzer? Wie formatieren sie ihre Adresse? Welche Namen werden für Adresskomponenten wie die Postleitzahl verwendet? Frank's Compulsive Guide to Postal Addresses (Franks zwanghafte Anleitung zu Postadressen) bietet nützliche Links und ausführliche Informationen zu Adressformaten in über 200 Ländern.
Länderauswahlen sind berüchtigt für ihre schlechte Nutzerfreundlichkeit. Wir raten davon ab, „Ausgewählte Elemente für eine lange Liste von Elementen“ zu vermeiden und der ISO 3166-Ländercodestandard derzeit 249 Länder auflistet. Anstelle von
<select>können Sie eine Alternative wie die Länderauswahl des Baiymard Institute in Betracht ziehen.Können Sie eine bessere Auswahl für Listen mit vielen Elementen entwerfen? Wie sorgen Sie dafür, dass Ihr Design auf einer Vielzahl von Geräten und Plattformen barrierefrei ist? Das Element
<select>eignet sich nicht gut für eine große Anzahl von Elementen, ist aber zumindest in nahezu allen Browsern und Hilfstechnologien nutzbar.Im Blogpost <input type="country" /> wird die Komplexität der Standardisierung einer Länderauswahl erläutert. Auch die Lokalisierung von Ländernamen kann problematisch sein. Mit Länderlisten können Sie Ländercodes und Namen in mehreren Sprachen und Formaten herunterladen.