Welche Formularfelder kann ich verwenden?
Verwenden Sie für die bestmögliche Nutzererfahrung das Element und Element type, das für die vom Nutzer eingegebenen Daten am besten geeignet ist.
Nutzern beim Ausfüllen von Text helfen
Verwenden Sie das <input>-Element, um Nutzern ein Formularfeld zum Einfügen von Text zur Verfügung zu stellen.
Diese Option eignet sich am besten für einzelne Wörter und kurze Texte.
Für längeren Text solltest du das Element <textarea> verwenden.
Dadurch sind mehrere Textzeilen möglich und der Nutzer kann den eingegebenen Text leichter sehen, da das Element scrollbar ist und seine Größe angepasst werden kann.
Sicherstellen, dass Nutzer Daten im richtigen Format eingeben
Möchten Sie Nutzern bei der Eingabe einer Telefonnummer helfen?
Ändern Sie das type-Attribut für <input> in type="tel".
Nutzer von Mobilgeräten erhalten eine angepasste Bildschirmtastatur, mit der sie die Telefonnummer schneller und einfacher eingeben können.
Verwenden Sie type="email" als E-Mail-Adresse.
Auch hier ist eine angepasste Bildschirmtastatur zu sehen.
Verwenden Sie das Attribut required, damit das Formularfeld ein Pflichtfeld ist.
Wenn das Formular gesendet wird, überprüft der Browser, ob die Eingabe einen Wert enthält und ob er gültig ist. In diesem Fall muss die E-Mail-Adresse korrekt formatiert sein.
Weitere Informationen zu den Eingabetypen Diese bieten auch integrierte Validierungsfunktionen.
Nutzern beim Ausfüllen von Daten helfen
Wann möchtest du deine nächste Reise beginnen?
Verwende type="date", um Nutzern beim Ausfüllen von Daten zu helfen.
In einigen Browsern wird das Format als Platzhalter wie yyyy-mm-dd angezeigt, der zeigt, wie das Datum eingegeben wird.
Alle modernen Browser bieten benutzerdefinierte Benutzeroberflächen für die 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 wir uns zunächst mögliche Lösungen an, wenn Nutzende nur eine Option auswählen können.
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 Elements <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, ist <input> vom Typ range möglicherweise eine gute Option.
Müssen mehrere Optionen zur Auswahl stehen?
Verwende ein <select>-Element mit dem multiple-Attribut oder mehrere <input>-Elemente vom Typ checkbox.
Sie können ein <input> auch in Kombination mit dem <datalist>-Element verwenden.
Dadurch erhältst du eine Kombination aus einem Textfeld und einer Liste von <option>-Elementen.
Dafür sorgen, dass Nutzer verschiedene Datentypen eingeben können
Es gibt weitere Eingabetypen für bestimmte Anwendungsfälle.
Es gibt einen <input> vom Typ color, über den Nutzern in unterstützten Browsern eine Farbauswahl zur Verfügung steht. Außerdem gibt es verschiedene andere Typen. Damit Nutzer ihr Passwort eingeben können, verwenden Sie <input> mit type="password". Jedes eingegebene Zeichen wird von einem Sternchen („*“) oder einem Punkt („•“) verdeckt, damit das Passwort nicht gelesen werden kann.
Möchten Sie den Formulardaten ein eindeutiges Sicherheitstoken hinzufügen?
<input> mit type="hidden" verwenden.
Der Wert einer <input> vom Typ hidden kann von Nutzern nicht gesehen oder geändert werden.
Damit Nutzer Dateien hochladen und einreichen können, verwenden Sie <input> mit type="file".
Wenn ein besonderer Anwendungsfall vorliegt, in dem kein integriertes Element oder kein integrierter Element oder Typ geeignet ist, können Sie auch benutzerdefinierte Elemente definieren.
Nutzern beim Ausfüllen des Formulars helfen
Es gibt viele Formularelemente und -typen, aber welches sollte Sie wählen?
In einigen Anwendungsfällen ist es einfach, das entsprechende Element und den entsprechenden Typ auszuwählen, z. B. <input type="date">. Bei anderen ist das unterschiedlich.
Du kannst beispielsweise mehrere <input>-Elemente mit type="checkbox" oder einem <select>-Element verwenden.
Weitere Informationen zum Auswählen von Listenfeldern und Drop-down-Listen
Generell sollten Sie Ihr Formular mit echten Nutzern testen, um das beste Formularelement und den besten Typ zu ermitteln.
Wissen testen
Testen Sie Ihr Wissen über Formularfelder
Ist es möglich, mit einer Formularsteuerung 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 zur Eingabe von Passwörtern angezeigt.