Verwendung von Formulareingaben

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

Gängige Eingabetypen

Texteingabe

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

<input type="text" />

Passwort-Eingabefeld

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

<input type="password" />

E-Mail-Eingabefeld

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" />

Telefon-Eingabefeld

Verwendet zum Erfassen von Telefonnummern von Benutzern.

<input type="tel" />

Zahlenfeld

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

<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 Mehrfachauswahlen zulässig sind, 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. die Auswahl des Geschlechts oder einer Zahlungsmethode.

<input type="radio" />

Datei-Upload-Feld

Ermöglicht das Hochladen von Dateien vom eigenen 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 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.

Es ist Ihnen vielleicht aufgefallen, 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.