Wie bereits zuvor gesehen, ist das mächtigste Element eines Formulars das Eingabefeld. Dieses Element erwartet Daten vom Benutzer. Konzentrieren wir uns darauf.

Eingabetypen

Texteingabe

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

<input type="text" />

Passworteingabe

Verwendet für die Eingabe von Passwörtern, wobei Zeichen aus Sicherheitsgründen maskiert werden. Gewährleistet Privatsphäre durch das Verbergen der eingegebenen Zeichen.

<input type="password" />

E-Mail-Eingabe

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 zur Erfassung von Telefonnummern der Nutzer. Ermöglicht die Eingabe von Telefonnummern in verschiedenen Formaten, einschließlich internationaler Nummern.

<input type="tel" />

Zahlen-Eingabefeld

Verwendet zur Erfassung numerischer Daten von Nutzern. Stellt auf Mobilgeräten eine numerische Tastatur zur einfachen Eingabe bereit.

<input type="number" />

Kontrollkästchen

Ermöglicht Nutzern 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. die Auswahl mehrerer Elemente aus einer Liste oder die Zustimmung zu Geschäftsbedingungen.

<input type="checkbox" />

Optionsfeld

Ermöglicht Benutzer:innen, eine Option aus einer Liste sich gegenseitig ausschließender Auswahlmöglichkeiten auszuwählen. Geeignet für Szenarien, in denen nur eine Auswahl getroffen werden soll, wie z. B. Geschlechtsauswahl oder Auswahl einer Zahlungsmethode.

<input type="radio" />

Dateiupload

Ermöglicht Benutzer:innen, Dateien von ihrem Gerät auszuwählen, aus dem lokalen Dateisystem auszuwählen und diese mit den Formulardaten zu übermitteln. Besonders nützlich beim Anhängen von Dokumenten oder Bildern.

<input type="file" />

Datumsfeld, Zeitfeld und Datums-/Zeitfeld

Ermöglicht Benutzer:innen die Eingabe von Daten, Uhrzeiten oder beidem. Bietet benutzerfreundliche Oberflächen zur Auswahl von Datum und Uhrzeit. Nützlich zur Erfassung von Geburtsdaten, Terminen oder Veranstaltungszeiten.

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

Beispiel: Geben Sie etwas in die Felder ein, und es werden verschiedene Optionen vorgeschlagen. Keine Sorge; es werden keine Daten gesammelt.

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.

Labels

Labels (<label>) sind unerlässlich, um Textbeschriftungen mit Formulareingabefeldern zu verknüpfen und so die Barrierefreiheit und Benutzerfreundlichkeit zu erhöhen. Es ist wichtig, dass das for-Attribut des <label> -Tags mit dem id -Attribut des zugehörigen input -Elements übereinstimmt.
Beispiel:

<label for="username">Username:</label>
<input type="text" id="username" />

Im obigen Beispiel:

• Wenn Sie auf das Label Username: klicken, wird automatisch das zugehörige Eingabefeld fokussiert;
• Das label und das input sind über die Attribute for und id miteinander verknüpft;
• Beide Attribute, for und id, haben denselben Wert (username).

Das Ausfüllen des Formulars wird erleichtert, indem den Eingabefeldern aus dem vorherigen Beispiel Beschriftungen hinzugefügt werden.
Beispiel:

Video-Tutorial