Welche Formularfelder kann ich verwenden?
Verwenden Sie für eine optimale Nutzerfreundlichkeit das Element und das Element type
, das am besten zu den von den Nutzern eingegebenen Daten passt.
Nutzern beim Ausfüllen von Text helfen
Wenn Sie Nutzern ein Formularfeld zum Einfügen von Text zur Verfügung stellen möchten, verwenden Sie das Element <input>
.
Sie eignet sich am besten für einzelne Wörter und kurze Texte.
Verwenden Sie für längeren Text das Element <textarea>
.
So können mehrere Textzeilen angezeigt werden und der Nutzer kann den eingegebenen Text leichter sehen, da das Element scrollbar und veränderbar ist.
Achten Sie darauf, dass Nutzer Daten im richtigen Format eingeben
Möchten Sie Nutzern beim Ausfüllen einer Telefonnummer helfen?
Ändern Sie das type
-Attribut für die <input>
in type="tel"
.
Nutzer auf Mobilgeräten erhalten eine angepasste Bildschirmtastatur, mit der sie die Telefonnummer schneller und einfacher eingeben können.
Verwenden Sie type="email"
für eine E-Mail-Adresse.
Es wird wieder eine angepasste Bildschirmtastatur angezeigt.
Verwenden Sie das required
-Attribut, um das Formularfeld obligatorisch zu machen.
Wenn das Formular gesendet wird, prüft der Browser, ob die Eingabe einen Wert hat und gültig ist. In diesem Fall, ob es sich um eine korrekt formatierte E-Mail-Adresse handelt.
Weitere Informationen zu den verschiedenen Eingabetypen Außerdem bieten sie integrierte Validierungsfunktionen.
Nutzern beim Ausfüllen von Datumsangaben helfen
Wann möchten Sie Ihre nächste Fahrt beginnen?
Verwenden Sie type="date"
, um Nutzern das Ausfüllen von Datumsangaben zu erleichtern.
In einigen Browsern wird das Format als Platzhalter wie yyyy-mm-dd
angezeigt, der zeigt, wie das Datum eingegeben werden soll.
Alle modernen Browser bieten benutzerdefinierte Oberflächen für die Datumsauswahl in Form einer Datumsauswahl.
Nutzern bei der Auswahl einer Option helfen
Verwenden Sie type="checkbox"
, damit Nutzer eine Option auswählen oder das Häkchen entfernen können.
Möchten Sie mehrere Optionen anbieten?
Je nach Anwendungsfall gibt es verschiedene Alternativen.
Sehen wir uns zuerst mögliche Lösungen an, wenn Nutzer nur eine Option auswählen können sollen.
Sie können mehrere <input>
-Elemente mit type="radio"
und demselben name
-Wert verwenden. Nutzer sehen alle Optionen gleichzeitig, können aber nur eine auswählen.
Eine weitere Option ist das Element <select>
.
Nutzer können durch eine Liste der verfügbaren Optionen scrollen und eine auswählen.
Für einige Anwendungsfälle, z. B. die Auswahl eines Zahlenbereichs, kann <input>
vom Typ range
eine gute Option sein.
Müssen Sie die Möglichkeit bieten, mehrere Optionen auszuwählen?
Verwenden Sie ein <select>
-Element mit dem multiple
-Attribut oder mehrere <input>
-Elemente vom Typ checkbox
.
Sie können <input>
auch in Kombination mit dem Element <datalist>
verwenden.
So erhalten Sie eine Kombination aus einem Textfeld und einer Liste von <option>
-Elementen.
Sorgen Sie dafür, dass Nutzer verschiedene Datentypen eingeben können
Für bestimmte Anwendungsfälle gibt es weitere Eingabetypen.
Es gibt eine <input>
vom Typ color
, die Nutzern in unterstützten Browsern eine Farbauswahl bietet. Es gibt auch verschiedene andere Typen. Damit Nutzer ihr Passwort eingeben können, verwenden Sie <input>
mit type="password"
. Jedes eingegebene Zeichen wird durch ein Sternchen („*“) oder einen Punkt („•“) ersetzt, damit das Passwort nicht gelesen werden kann.
Möchten Sie ein eindeutiges Sicherheitstoken in die Formulardaten aufnehmen?
Verwenden Sie <input>
mit type="hidden"
.
Der Wert einer <input>
vom Typ hidden
kann von Nutzern nicht gesehen oder geändert werden.
Wenn Nutzer Dateien hochladen und einreichen sollen, verwenden Sie <input>
mit type="file"
.
Sie können auch benutzerdefinierte Elemente definieren, wenn Sie einen speziellen Anwendungsfall haben, für den kein integriertes Element oder kein vordefinierter Typ geeignet ist.
Nutzern das Ausfüllen Ihres Formulars erleichtern
Es gibt viele Formularelemente und ‑typen. Welche sollten Sie verwenden?
Bei einigen Anwendungsfällen ist es ganz einfach, das richtige Element und den richtigen Typ auszuwählen, z. B. <input type="date">
. Bei anderen ist das unterschiedlich.
Sie können beispielsweise mehrere <input>
-Elemente mit type="checkbox"
oder einem <select>
-Element verwenden.
Weitere Informationen zum Auswählen zwischen Listenfeldern und Drop-down-Listen
Testen Sie Ihr Formular mit echten Nutzern, um das beste Formularelement und den besten Typ zu finden.
Wissen testen
Ihr Wissen zu Formularfeldern testen
Ist es möglich, mehrere Dateien mit einem Formularkontrollelement hochzuladen?
<input type="files">
.<input type="file" multiple>
.<input type="multiple-files">
.Was ist der Unterschied zwischen type="text"
und type="password"
?
type="password"
wird eine angepasste Bildschirmtastatur zur Eingabe von Passwörtern angezeigt.type="password"
wird jedes eingegebene Zeichen durch ein Sternchen (*
) oder einen Punkt (•
) verdeckt.type="password"
wird eine benutzerdefinierte Benutzeroberfläche für die Passworteingabe angezeigt.