Damit Sie Nutzern die bestmögliche Nutzererfahrung bieten, sollten Sie das Element und das Element type verwenden, das für die Daten, die der Nutzer eingibt, am besten geeignet ist.
Nutzern beim Ausfüllen von Text helfen
Verwenden Sie das Element <input>, um ein Formularfeld bereitzustellen. Ein <input> ist die beste Wahl für einzelne Wörter, Phrasen und kurze Einträge. Verwenden Sie für längeren Text das Element <textarea>. So können mehrere Textzeilen eingegeben werden und der Nutzer kann den eingegebenen Text leichter sehen, da das Element scrollbar und in der Größe anpassbar ist.
Sorgen Sie dafür, dass Nutzer Daten im richtigen Format eingeben.
Möchten Sie Nutzern helfen, eine Telefonnummer einzugeben?
Ändern Sie das type-Attribut für <input> in type="tel".
Nutzer auf Mobilgeräten erhalten eine angepasste Bildschirmtastatur, damit sie die Telefonnummer schneller eingeben können.
Verwenden Sie type="email" für eine E‑Mail-Adresse.
Auch hier wird eine angepasste Bildschirmtastatur angezeigt.
Verwenden Sie das Attribut required, um das Formularfeld als Pflichtfeld zu kennzeichnen.
Wenn das Formular gesendet wird, prüft der Browser, ob die Eingabe einen Wert hat und ob dieser gültig ist. In diesem Fall muss es sich um eine korrekt formatierte E-Mail-Adresse handeln.
Weitere Informationen zu den verschiedenen Eingabetypen Sie bieten auch integrierte Validierungsfunktionen.
Nutzern beim Ausfüllen von Datumsangaben helfen
Wann möchten Sie Ihre nächste Reise antreten?
Verwenden Sie type="date", um Nutzern beim Ausfüllen von Datumsangaben zu helfen.
In einigen Browsern wird das Format als Platzhalter wie yyyy-mm-dd angezeigt, um zu veranschaulichen, wie das Datum eingegeben werden muss.
Alle modernen Browser bieten benutzerdefinierte Oberflächen zum Auswählen von Datumsangaben in Form einer Datumsauswahl.
Nutzern bei der Auswahl einer Option helfen
Verwenden Sie type="checkbox", damit Nutzer eine mögliche Option auswählen oder die Auswahl aufheben können.
Möchten Sie mehrere Optionen anbieten?
Je nach Anwendungsfall gibt es verschiedene Alternativen.
Sehen Sie sich 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 auf einmal, können aber nur eine auswählen.
Eine weitere Möglichkeit ist die Verwendung des <select>-Elements.
Nutzer können durch eine Liste mit 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 Attribut multiple oder mehrere <input>-Elemente vom Typ checkbox.
Sie können auch ein <input> in Kombination mit dem Element <datalist> verwenden.
Sie erhalten eine Kombination aus einem Textfeld und einer Liste von <option>-Elementen.
Sicherstellen, dass Nutzer verschiedene Datentypen eingeben können
Für bestimmte Anwendungsfälle gibt es weitere Eingabetypen.
Es gibt ein <input> vom Typ color, um Nutzern in unterstützten Browsern eine Farbauswahl zur Verfügung zu stellen. Außerdem gibt es 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 („•“) verdeckt, 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 eines <input> vom Typ hidden kann von Nutzern nicht eingesehen oder geändert werden.
Wenn Sie Nutzern das Hochladen und Senden von Dateien ermöglichen möchten, 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 integrierter Typ geeignet ist.
Nutzern beim Ausfüllen Ihres Formulars helfen
Es gibt viele Formularelemente und -typen, aber welche sollten Sie auswählen?
In einigen Anwendungsfällen ist es ganz einfach, das passende Element und den passenden Typ auszuwählen, z. B. <input type="date">. Bei anderen hängt es davon ab.
Sie können beispielsweise mehrere <input>-Elemente mit type="checkbox" oder einem <select>-Element verwenden.
Weitere Informationen
Im Allgemeinen sollten Sie Ihr Formular mit echten Nutzern testen, um das beste Formularelement und den besten Typ zu finden.
Wissen testen
Ihr Wissen zu Formularfeldern testen
Ist es möglich, mit einem Formularsteuerelement mehrere Dateien 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 Oberfläche für die Eingabe von Passwörtern angezeigt.