Adressformulare

Das Ausfüllen einer Adresse kann zeitaufwendig und frustrierend sein. Wozu dient Adresszeile 2? Vielleicht haben Sie keinen Nachnamen. Was sollten Sie dann in das Feld Nachname eingeben? Vermeiden Sie diese Verwirrung und helfen Sie Nutzern, Adressformulare auszufüllen.

Nutzerfreundliches Formular erstellen

Viele Formulare verwenden ein Feld für den Vornamen und eines für den Nachnamen. Einige Personen haben jedoch keinen Nachnamen oder ihr Name besteht nicht aus zwei Teilen. Wie sollten sie das Feld für den Nachnamen ausfüllen? Verwenden Sie ein einzelnes <input> für das Namensfeld. Weitere Informationen zum Umgang mit verschiedenen Namensformaten

Laut Studien kann Adresszeile 2 für Nutzer verwirrend sein. Verwenden Sie für die gesamte Adresse ein <textarea> oder blenden Sie das Feld Adresszeile 2 hinter einem <button> ein.

Seien Sie bei Beschreibungen von Formularsteuerelementen vorsichtig. Nutzer in den USA sagen beispielsweise ZIP, im Vereinigten Königreich postcode. Mit <label for="zip">ZIP or postal code (optional)</label> können Sie dafür sorgen, dass Nutzer wissen, welche Daten sie eingeben müssen. Machen Sie das Feld für die Postleitzahl optional, da nicht jede Adresse eine Postleitzahl hat.

Nutzer beim Eingeben ihrer Adresse unterstützen

Das Attribut autocomplete kann Nutzern helfen, ihre Adresse noch einmal einzugeben:

  • autocomplete="name"
  • autocomplete="street-address"
  • autocomplete="postal-code"
  • autocomplete="country"

Sie können für autocomplete mehrere durch ein Leerzeichen getrennte Werte definieren. Angenommen, Sie haben ein Formular mit einer Versandadresse und ein weiteres Formular für eine Rechnungsadresse. Mit autocomplete="billing postal-code" können Sie dem Browser mitteilen, welche Postleitzahl für die Rechnungsadresse gilt. Verwenden Sie für die Versandadresse shipping als ersten Wert.

Mit dem Attribut enterkeyhint können Sie das Label für die Taste Enter auf Bildschirmtastaturen ändern. Verwenden Sie enterkeyhint="done" für das letzte Formularsteuerelement und enterkeyhint="next" für die anderen Formularsteuerelemente.

Ressourcen