Formulareingaben sind die Hauptmethode, mit der Benutzer Informationen eingeben. HTML stellt viele verschiedene Eingabetypen bereit, abhängig davon, welche Daten benötigt werden.

Häufige Eingabetypen

Texteingabe

Vorgesehen für die Eingabe kurzer Textdaten, wie Benutzernamen, E-Mail-Adressen oder kurze Nachrichten.

<input type="text" />

Passwortfeld

Verwendet für die Eingabe von Passwörtern, wobei die Zeichen aus Sicherheitsgründen maskiert werden.

<input type="password" />

E-Mail-Feld

Verwendet zum Erfassen von E-Mail-Adressen von Benutzern. Führt eine clientseitige Validierung durch, um sicherzustellen, dass der eingegebene Wert dem E-Mail-Format entspricht.

<input type="email" />

Telefonfeld

Verwendet zum Erfassen von Telefonnummern von Benutzern.

<input type="tel" />

Zahlenfeld

Verwendet zur Erfassung numerischer Daten von Benutzern. Stellt auf mobilen Geräten eine numerische Tastatur bereit.

<input type="number" />

Kontrollkästchen

Ermöglicht Benutzern die Auswahl einer oder mehrerer Optionen aus einer Liste von Auswahlmöglichkeiten. Geeignet für Szenarien, in denen Mehrfachauswahl zulässig ist, wie z. B. das Auswählen mehrerer Elemente aus einer Liste oder das Akzeptieren von Geschäftsbedingungen.

<input type="checkbox" />

Optionsfeld

Ermöglicht Benutzern die Auswahl einer Option aus einer Liste sich gegenseitig ausschließender Auswahlmöglichkeiten. Geeignet für Szenarien, in denen nur eine Option ausgewählt werden soll, wie z. B. Geschlechtsauswahl oder Auswahl einer Zahlungsmethode.

<input type="radio" />

Datei-Upload

Ermöglicht Benutzern das Hochladen von Dateien von ihrem Gerät, die Auswahl aus dem lokalen Dateisystem und das Übermitteln dieser Dateien mit den Formulardaten. Diese Funktion ist besonders nützlich beim Anhängen von Dokumenten oder Bildern.

<input type="file" />

Datumsfeld, Zeitfeld und Datums-/Zeitfeld

Ermöglicht Benutzern die Eingabe von Daten, Uhrzeiten oder beidem. Bietet benutzerfreundliche Oberflächen zur Auswahl von Datum und Uhrzeit.

<input type="date" />
<input type="time" />
<input type="datetime-local" />

Geben Sie etwas in die Felder ein, und es werden verschiedene Optionen vorgeschlagen. Es werden keine Daten gespeichert.

Sie haben vielleicht bemerkt, dass das Ausfüllen des Formulars nicht sehr komfortabel ist, wenn nicht klar ist, was in jedes Feld eingetragen werden soll. Hier kommen die Beschriftungen (Labels) ins Spiel.