Welche Formularfelder kann ich verwenden?
Um die bestmögliche Nutzererfahrung zu bieten,
Verwenden Sie das Element type, das für die vom Nutzer eingegebenen Daten am besten geeignet ist.
Nutzern bei der Texteingabe helfen
Mit dem Element <input> können Sie Nutzern ein Formularfeld zum Einfügen von Text zur Verfügung stellen.
Es ist die beste Wahl für einzelne Wörter und kurze Texte.
Verwenden Sie für längeren Text das Element <textarea>.
So können mehrere Textzeilen,
Außerdem ist es für die Nutzenden einfacher, den eingegebenen Text zu 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 beim Ausfüllen einer Telefonnummer helfen?
Ändern Sie das Attribut type für <input> in type="tel".
Nutzer von Mobilgeräten erhalten
eine angepasste Bildschirmtastatur,
damit 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, um das Formularfeld obligatorisch zu machen.
Beim Senden des Formulars prüft der Browser, ob die Eingabe einen Wert enthält und gültig ist:
dass die E-Mail-Adresse richtig formatiert ist.
Weitere Informationen zu den verschiedenen Eingabetypen Sie bieten auch integrierte Validierungsfunktionen.
Nutzern bei der Dateneingabe helfen
Wann möchtest du deine nächste Reise beginnen?
Verwenden Sie type="date", damit Nutzer Datumsangaben eingeben können.
In einigen Browsern wird das Format als Platzhalter angezeigt, z. B. yyyy-mm-dd,
wie das Datum eingegeben wird.
Alle modernen Browser bieten benutzerdefinierte Benutzeroberflächen für die Datumsauswahl 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 wir uns zunächst mögliche Lösungen an, wenn Nutzende nur eine Option auswählen können sollen.
Du kannst 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.
Bei einigen Anwendungsfällen, z. B. bei der Auswahl eines Zahlenbereichs,
<input> vom Typ range könnte eine gute Option sein.
Müssen Sie die Möglichkeit bieten, mehrere Optionen auszuwählen?
Verwende ein <select>-Element mit dem Attribut multiple oder mehrere <input>-Elemente des Typs checkbox.
Sie können ein <input> auch in Kombination mit dem Element <datalist> verwenden.
Dadurch erhalten Sie eine Kombination aus einem Textfeld und einer Liste mit <option>-Elementen.
Sicherstellen, dass Nutzer unterschiedliche Datentypen eingeben können
Es gibt weitere Eingabetypen für bestimmte Anwendungsfälle.
Es gibt ein <input> vom Typ color, das Nutzern eine Farbauswahl in unterstützten Browsern zur Verfügung stellt.
aber es gibt noch viele weitere. Damit Nutzer ihr Passwort eingeben können, verwenden Sie <input>
mit type="password". Alle eingegebenen Zeichen werden durch ein Sternchen ("*") oder einen Punkt ("•") verdeckt.
damit das Passwort nicht gelesen werden kann.
Möchten Sie in die Formulardaten ein eindeutiges Sicherheitstoken einfügen?
<input> mit type="hidden" verwenden.
Der Wert von <input> vom Typ hidden kann von Nutzern weder gesehen noch geändert werden.
Verwende <input> mit type="file", um Nutzern das Hochladen und Einreichen von Dateien zu ermöglichen.
Bei besonderen Anwendungsfällen können Sie auch benutzerdefinierte Elemente definieren. wenn kein integriertes Element oder ein integrierter Typ geeignet ist.
Nutzern beim Ausfüllen des Formulars helfen
Es gibt viele Formularelemente und -typen. Welche sollten Sie auswählen?
In einigen Anwendungsfällen ist es einfach, das geeignete Element und den passenden Typ auszuwählen.
wie <input type="date">. Bei anderen kommt es darauf an.
Du kannst beispielsweise mehrere <input>-Elemente mit type="checkbox"- oder <select>-Elementen verwenden.
Weitere Informationen zur Auswahl zwischen Listenfeldern und Drop-down-Listen
Im Allgemeinen sollten Sie Testen Sie Ihr Formular mit echten Nutzern, um das beste Formularelement und den besten Formulartyp zu finden.
Wissen testen
Testen Sie Ihr Wissen zu Formularfeldern
Ist es möglich, mehrere Dateien mit einer Formularsteuerung 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.