Wie können Sie ein Formular entwerfen, das für eine Vielzahl von Namen und Adressformaten gut funktioniert? Kleinere Form Störungen reizen Nutzer und können dazu führen, dass sie Ihre Website verlassen oder einen Kauf aufgeben. oder sich registrieren.
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 Codelabs mit einem leeren Formular, für sich erstellen. Dann beginnen Sie, Eingaben hinzuzufügen. CSS und ein wenig JavaScript sind bereits included.)
Klicke auf Zum Bearbeiten Remix, 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 und repetitiv erscheinen, wenn es sich nur um ein Namensfeld handelt, aber es hat bereits viel getan.
Sie haben das label mit dem input verknüpft, indem Sie das for-Attribut von label mit dem
name oder id von input. Durch Tippen oder Klicken auf ein Label wird der Fokus auf dessen Eingabe verschoben
als die Eingabe allein – was gut für Finger, Daumen und Mausklicks ist! Screenreader
Labeltext ansagen, wenn das Label oder die Eingabe des Labels hervorgehoben wird.
Was ist mit name="name"? Der Name, der mit den Daten verknüpft ist
aus dieser Eingabe, die beim Senden des Formulars an den Server gesendet wird. name-Attribut einfügen
bedeutet außerdem, dass die FormData API auf die Daten aus diesem Element zugreifen kann.
Schritt 2: Attribute hinzufügen, die Nutzern bei der Dateneingabe helfen
Was passiert, wenn Sie in Chrome auf die Eingabe unter Name tippen oder klicken? Du solltest die Funktion „Autofill“ sehen
vom Browser gespeicherte Vorschläge und Vermutungen sind für diese Eingabe geeignet,
name- und id-Werte.
Fügen Sie Ihrem Eingabecode jetzt autocomplete="name" hinzu, damit 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 auf den Eingabefeld Name. Welche Unterschiede stellen Sie fest?
Sie sollten eine leichte Änderung bemerken: Mit autocomplete="name" sind die Vorschläge jetzt spezifisch
-Werte, die zuvor in Formulareingaben verwendet wurden, die ebenfalls autocomplete="name" enthielten. Der Browser
nicht nur zu erraten, was angemessen sein könnte: Sie haben die Kontrolle. Außerdem wird die Option Verwalten... angezeigt.
Option zum Anzeigen und Bearbeiten der in Ihrem Browser gespeicherten Namen und Adressen.
Fügen Sie nun Attribute für die Einschränkungsvalidierung hinzu,
maxlength, pattern und required. Ihr Eingabecode sieht daher so aus:
<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 zulässt, Bindestriche und Punkte. Das bedeutet, dass Namen wie Françoise oder Jörg nicht als „ungültig“. Dies ist nicht der Fall, wenn Sie den Wert\wverwenden, bei dem [nur Zeichen aus dem lateinisches Alphabet.requiredbedeutet... erforderlich! Der Browser lässt die Übermittlung des Formulars ohne Daten für in dieses Feld ein. Die Eingabe wird gewarnt und hervorgehoben, wenn Sie versuchen, sie zu senden. Kein zusätzlicher Code erforderlich!
Um zu testen, wie das Formular mit und ohne diese Attribute funktioniert, geben Sie Daten ein:
- Geben Sie Werte ein, die nicht in das Attribut
patternpassen. - Versuchen Sie, das Formular mit einer leeren Eingabe einzureichen. Sie sehen eine Warnung zur integrierten Browserfunktionalität: Pflichtfeld und legt den Fokus darauf.
Schritt 3: Dem 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. Es eignet sich hervorragend für
ausschneiden und einfügen.
Sie sollten Ihr Adressformular nicht in Komponenten wie Straßenname und Hausnummer aufteilen, es sei denn, die Sie wirklich brauchen. Erzwingen Sie Nutzer nicht dazu, ihre Adresse in unsinnige Felder einzufügen.
Fügen Sie nun Felder für Postleitzahl und Land oder Region hinzu. Der Einfachheit halber hier nur die ersten fünf Länder. 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>
Postleitzahl ist optional. Das liegt daran, dass viele Länder keine Postleitzahlen verwenden.
(Global Sourcebook bietet Informationen über
Adressformate für 194 verschiedene Länder, einschließlich Beispieladressen. Die Bezeichnung Land oder
Region wird anstelle von Land verwendet, weil einige Optionen in der vollständigen Liste (z. B. die
Vereinigtes Königreich) sind (trotz dem Wert autocomplete) keine einzelnen Länder.
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 ein
Adresse, z. B. für Versand und Rechnungsadresse? Aktualisieren Sie Ihr Formular, damit Kunden teilnehmen können
Liefer- und Rechnungsadressen. Wie können Sie die Dateneingabe
so schnell und einfach wie möglich
vor allem, wenn die beiden Adressen identisch sind? Im Artikel zu diesem Codelab erfahren Sie,
Techniken für die Verarbeitung mehrerer Adressen.
In jedem Fall müssen Sie jedoch die richtigen autocomplete-Werte verwenden.
Schritt 5: Feld für die Telefonnummer hinzufügen
Um eine Eingabe für eine Telefonnummer hinzuzufügen, 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>
Bei Telefonnummern ist nur eine Eingabe erforderlich: Teilen Sie die Nummer nicht in mehrere Teile auf. Das erleichtert es Nutzer Daten eingeben oder kopieren und einfügen können, vereinfacht die Validierung und ermöglicht Browser das automatische Ausfüllen.
Es gibt zwei Attribute, die die Eingabe einer Telefonnummer nutzerfreundlicher machen können:
type="tel"stellt sicher, dass mobile Nutzer die richtige Tastatur erhalten.enterkeyhint="done"legt das Label der Eingabetaste auf der mobilen Tastatur so fest, dass dies die letzte und das Formular kann jetzt gesendet werden (Standardeinstellung istnext).
Das vollständige Adressformular sollte nun so aussehen:
- Testen Sie das Formular auf verschiedenen Geräten. Auf welche Geräte und Browser ist die Ausrichtung ausgerichtet? Wie könnte das Formular zu verbessern?
Es gibt mehrere Möglichkeiten, Ihr Formular auf verschiedenen Geräten zu testen:
- Gerätemodus der Chrome-Entwicklertools verwenden Mobilgeräte zu simulieren.
- Senden Sie die URL von Ihrem Computer an Ihr Smartphone.
- Verwenden Sie einen Dienst wie BrowserStack, um einen Bereich zu testen von Geräten und Browsern.
Weitere Möglichkeiten
Analytics und Monitoring echter Nutzer: damit die Leistung und Nutzerfreundlichkeit Ihres Formulardesigns für echte Nutzende getestet und überwacht werden kann. und überprüfen, ob die Änderungen erfolgreich waren. Du solltest die Ladeleistung und andere Web Vitals überwachen, sowie die Seitenanalyse (der Anteil der Nutzenden, der von Ihrem Adressformular abspringt, ohne es ausgefüllt zu haben) es? Wie viel Zeit verbringen Nutzer auf Ihren Adressformularseiten?) und Interaktionsanalysen (welche Seite Komponenten, mit denen die Nutzenden interagieren oder nicht?)
Wo befinden sich Ihre Nutzer? Wie formatieren sie ihre Adresse? Welche Namen verwenden sie als Adresse? Komponenten wie Postleitzahl? Franks zwanghafte Anleitung zu Postanschriften bietet nützliche Links und ausführliche Anleitungen zu Adressformaten in über 200 Ländern.
Länderauswahl ist für ihre schlechte Nutzerfreundlichkeit bekannt. Ausgewählte Elemente sollten für eine lange Liste von Elementen vermieden werden. und der Ländercode-Standard ISO 3166 enthält derzeit 249 Länder. Anstelle von
<select>können Sie eine Alternative wie die Länderauswahl des Baiymard Institute.Können Sie eine bessere Auswahl für Listen mit vielen Elementen entwerfen? Wie würden Sie sicherstellen, dass Ihr Design auf einer Vielzahl von Geräten und Plattformen? Das
<select>-Element eignet sich nicht gut für eine große Anzahl von Elementen vorhanden ist, aber sie ist zumindest auf praktisch allen Browsern und Hilfsgeräten nutzbar!)Im Blogpost <input type="Land" /> diskutiert wie komplex die Standardisierung einer Länderauswahl ist. Die Lokalisierung von Ländernamen kann auch ist problematisch. Länderlisten verfügt über ein Tool zur Herunterladen von Ländercodes und Namen in mehreren Sprachen und verschiedenen Formaten