Codelab: Best Practices für Adressformulare

Sam Dutton

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. Fügen Sie dann Eingaben hinzu. (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 mit dem folgenden Code ein Name-Feld 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 (in diesem Fall „name“), der mit den Daten aus dieser Eingabe verknüpft ist und 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 fallen Ihnen auf?

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 macht keine Vermutungen, 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 länger als 100 Zeichen zulässt.

• pattern="[\p{L} \-\.]+" verwendet einen regulären Ausdruck, der Unicode-Buchstaben, Bindestriche und 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 \w verwenden, bei dem nur Zeichen aus dem lateinischen Alphabet zulässig sind.

• required bedeutet: „erforderlich“ Der Browser lässt das Senden des Formulars ohne Daten für dieses Feld nicht zu und warnt und hebt die Eingabe hervor, wenn Sie versuchen, das Formular einzureichen. 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 zum Attribut pattern passen.
• 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

Wenn Sie ein Adressfeld hinzufügen möchten, 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. Zur Vereinfachung 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 Eingabe von Versand- und Rechnungsadressen erleichtern

Sie haben ein äußerst funktionales Adressformular erstellt. Was ist aber, wenn Ihre Website mehr als eine Adresse benötigt, z. B. für den Versand und die Rechnungsstellung? 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 ist next).

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 (welcher Anteil der Nutzer springt aus Ihrem Adressformular heraus, ohne es auszufüllen? Wie lange verbringen Nutzer auf den Seiten mit dem Adressformular?) und Interaktionsanalysen (mit welchen Seitenkomponenten interagieren Nutzer und mit welchen nicht?) im Blick behalten.

• Wo befinden sich Ihre Nutzer? Wie formatiert er seine Adresse? Welche Namen werden für Adresskomponenten wie Postleitzahlen 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. Achten Sie darauf, bei einer langen Liste von Elementen keine Auswahlelemente zu verwenden. Der ISO 3166-Ländercodestandard enthält derzeit 249 Länder. Anstelle eines <select> können Sie eine Alternative wie die Länderauswahl des Baymard Institute verwenden.

  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. Countries Lists bietet ein Tool zum Herunterladen von Ländercodes und ‑namen in mehreren Sprachen und Formaten.