Codelab: Best Practices für Adressformulare

Sam Dutton

Wie können Sie ein Formular entwerfen, das für eine Vielzahl von Namen und Adressformaten gut funktioniert? Kleinere Fehler in Formularen können Nutzer irritieren und dazu führen, dass sie Ihre Website verlassen oder auf einen Kauf oder eine Anmeldung verzichten.

In diesem Codelab erfahren Sie, wie Sie ein nutzerfreundliches, barrierefreies Formular erstellen, das für die meisten Nutzenden gut funktioniert.

Schritt 1: HTML-Elemente und -Attribute optimal nutzen

Sie beginnen diesen Teil des Codelab mit einem leeren Formular, nur mit einer Überschrift und einer Schaltfläche. Dann beginnen Sie, Eingaben hinzuzufügen. CSS und JavaScript sind bereits integriert.

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

• 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 kompliziert erscheinen und wiederholt für ein einzelnes Namensfeld sein, aber es funktioniert bereits sehr viel.

Sie haben das label mit dem input verknüpft, indem Sie das for-Attribut des label mit dem name oder id des inputs abgeglichen haben. Durch Tippen oder Klicken auf ein Label wird der Fokus auf die Eingabe verschoben, sodass ein viel größeres Ziel als die Eingabe allein entsteht – vorteilhaft für Finger, Daumen und Mausklicks. Screenreader liest Labeltext vor, wenn das Label oder seine Eingabe hervorgehoben wird.

Was ist mit name="name"? Dies ist der Name (der „Name“ ist), der den Daten aus dieser Eingabe zugeordnet ist und an den Server gesendet wird, wenn das Formular gesendet wird. Wenn Sie ein name-Attribut angeben, kann die FormData API auf die Daten aus diesem Element zugreifen.

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

Was passiert, wenn Sie in Chrome auf die Eingabe Name tippen oder klicken? Sie sollten Vorschläge für automatisches Ausfüllen sehen, die der Browser gespeichert hat und Annahmen aufgrund seiner name- und id-Werte für diese Eingabe geeignet sind.

Fügen Sie nun autocomplete="name" in Ihren Eingabecode ein, sodass er so aussieht:

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name">
</section>

Aktualisieren Sie die Seite in Chrome und tippen oder klicken Sie in das Eingabefeld Name. Welche Unterschiede sehen Sie?

Sie sollten eine kleine Änderung bemerken: Mit autocomplete="name" sind die Vorschläge jetzt spezifische Werte, die zuvor in Formulareingaben verwendet wurden, die ebenfalls autocomplete="name" hatten. Der Browser verrät nicht nur, was angemessen sein könnte: Sie haben die Kontrolle. Mit der Option Verwalten... können Sie die von Ihrem Browser gespeicherten Namen und Adressen ansehen und bearbeiten.

Fügen Sie jetzt die Attribute für die Einschränkungsvalidierung maxlength, pattern und required hinzu, sodass 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 Eingabe 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. Dies ist nicht der Fall, wenn Sie den Wert \w verwenden, der [nur Zeichen aus dem lateinischen Alphabet zulässt.

• required bedeutet... erforderlich! Der Browser lässt das Senden des Formulars ohne Daten für dieses Feld nicht zu. Wenn Sie versuchen, das Formular zu senden, wird eine Warnung angezeigt und die Eingabe wird hervorgehoben. Es ist kein zusätzlicher Code erforderlich.

Geben Sie Daten ein, um zu testen, wie das Formular mit und ohne diese Attribute funktioniert:

• Gib Werte ein, die nicht in das Attribut „pattern“ passen.
• Versuchen Sie, das Formular mit leerem Feld zu senden. Die integrierte Browserfunktion zeigt einen Hinweis auf das leere Pflichtfeld an und legt den Fokus darauf fest.

Schritt 3: Dem Formular ein flexibles Adressfeld hinzufügen

Fügen Sie dem Formular den folgenden Code hinzu, um ein Adressfeld hinzuzufügen:

<section>
  <label for="address">Address</label>
  <textarea id="address" name="address" autocomplete="address"
    maxlength="300" required></textarea>
</section>

Eine textarea ist die flexibelste Möglichkeit für Nutzer, ihre Adresse einzugeben. Sie eignet sich außerdem hervorragend zum Ausschneiden und Einfügen.

Vermeiden Sie es, Ihr Adressformular in Komponenten wie Straße und Hausnummer aufzuteilen, es sei denn, dies muss wirklich erforderlich sein. Zwingen Sie Nutzer nicht dazu, ihre Adresse in Felder einzutragen, die keinen Sinn ergeben.

Fügen Sie nun 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 die Postleitzahl optional ist, weil in vielen Ländern keine Postleitzahlen verwendet werden. Global Sourcebook enthält Informationen zu Adressformaten für 194 verschiedene Länder, einschließlich Beispieladressen. Das Label Land oder Region wird anstelle von Land verwendet, da einige Optionen in der vollständigen Liste (z. B. das Vereinigte Königreich) (trotz des Werts autocomplete) keine einzelnen Länder sind.

Schritt 4: Kunden die einfache Eingabe von Versand- und Rechnungsadressen ermöglichen

Sie haben ein hochfunktionales Adressformular erstellt. Aber was ist, wenn Ihre Website mehr als eine Adresse erfordert, 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 Artikel zu diesem Codelab werden Techniken zum Umgang mit mehreren Adressen erläutert. Achten Sie in jedem Fall darauf, die richtigen autocomplete-Werte zu verwenden.

Schritt 5: Telefonnummernfeld hinzufügen

Um eine Telefonnummer einzugeben, geben Sie den folgenden Code in das Formular ein:

<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 nur eine Eingabe: Teilen Sie die Nummer nicht in Teile auf. Das erleichtert Nutzern das Eingeben von Daten oder Kopieren und Einfügen, vereinfacht die Validierung und ermöglicht den Browsern das automatische Ausfüllen.

Es gibt zwei Attribute, die die Nutzerfreundlichkeit bei der Eingabe einer Telefonnummer verbessern können:

• type="tel" sorgt dafür, dass mobile Nutzer die richtige Tastatur erhalten.
• Mit enterkeyhint="done" wird für das Label der Eingabetaste auf der mobilen Tastatur angegeben, dass dies das letzte Feld ist und das Formular jetzt gesendet werden kann. Der Standardwert ist next.

Ihr vollständiges Adressformular sollte nun wie folgt aussehen:

• Sie können das Formular auf verschiedenen Geräten testen. Auf welche Geräte und Browser ist Ihre Kampagne ausgerichtet? Wie könnte das Formular verbessert werden?

Es gibt mehrere Möglichkeiten, ein Formular auf verschiedenen Geräten zu testen:

• Verwenden Sie den Gerätemodus der Chrome-Entwicklertools, um Mobilgeräte zu simulieren.
• Senden Sie die URL von Ihrem Computer an Ihr Smartphone.
• Verwenden Sie einen Dienst wie BrowserStack, um Tests auf verschiedenen Geräten und in verschiedenen Browsern durchzuführen.

Noch mehr

• Analysen und echtes Nutzermonitoring: Ermögliche die Leistung und Nutzerfreundlichkeit deines Formulardesigns, um für echte Nutzer zu testen und zu überwachen sowie zu prüfen, ob Änderungen erfolgreich waren. Sie sollten die Ladeleistung und andere Web Vitals im Blick behalten sowie Seitenanalysen (wie viel Prozent der Nutzer von Ihrem Adressformular abspringen, ohne es auszufüllen? Wie lange verbringen Nutzer auf Ihren Adressformularseiten?) und Interaktionsanalysen (mit welchen Seitenkomponenten interagieren Nutzer) überwachen?

• Wo befinden sich Ihre Nutzer? Wie formatiert sie ihre Adresse? Welche Namen werden für Adresskomponenten wie Postleitzahl verwendet? Franks Zwangsleitfaden für Postanschriften enthält nützliche Links und umfassende Anleitungen zu Adressformaten in über 200 Ländern.

• Die Länderauswahl ist wegen der schlechten Nutzerfreundlichkeit bekannt. Bei einer langen Liste von Artikeln sollten Sie auf bestimmte Elemente verzichten und der ISO 3166-Standard für den Ländercode sind derzeit 249 Länder aufgeführt. Statt <select> können Sie auch eine Alternative in Betracht ziehen, z. B. die Länderauswahl des Baymard Institute.

  Können Sie eine bessere Auswahl für Listen mit vielen Elementen entwerfen? Wie würden Sie sicherstellen, dass Ihr Design über eine Vielzahl von Geräten und Plattformen zugänglich ist? Das <select>-Element funktioniert bei einer großen Anzahl von Elementen nicht so gut, aber zumindest kann es mit praktisch allen Browsern und Hilfsgeräten verwendet werden.

  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 in verschiedenen Formaten herunterladen.