Wie wir bereits gesehen haben, ist das mächtigste Element eines Formulars das Eingabefeld. Dieses Element erwartet Daten vom Benutzer. Lassen Sie uns darauf konzentrieren.

Arten von Eingaben

Texteingabe

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

<input type="text" />

Passworteingabe

Wird für die Eingabe von Passwörtern verwendet, bei denen die Zeichen aus Sicherheitsgründen maskiert werden. Gewährleistet die Privatsphäre, indem die eingegebenen Zeichen verborgen werden.

<input type="password" />

E-Mail-Eingabe

Wird verwendet, um E-Mail-Adressen von Benutzern zu sammeln. Führt eine clientseitige Validierung durch, um sicherzustellen, dass der eingegebene Wert im E-Mail-Format gültig ist.

<input type="email" />

Telefon-Eingabe

Wird verwendet, um Telefonnummern von Benutzern zu sammeln. Ermöglicht Benutzern die Eingabe von Telefonnummern in verschiedenen Formaten, einschließlich internationaler Nummern.

<input type="tel" />

Zahlen-Eingabe

Wird verwendet, um numerische Daten von Benutzern zu sammeln. Bietet eine numerische Tastatur auf mobilen Geräten für eine einfache Eingabe.

<input type="number" />

Kontrollkästchen

Ermöglicht Benutzern, eine oder mehrere Optionen aus einer Liste von Auswahlmöglichkeiten auszuwählen. Geeignet für Szenarien, in denen Mehrfachauswahlen erlaubt 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, eine Option aus einer Liste von sich gegenseitig ausschließenden Auswahlmöglichkeiten auszuwählen. Geeignet für Szenarien, in denen nur eine Option ausgewählt werden sollte, wie z.B. die Geschlechtsauswahl oder die Wahl einer Zahlungsmethode.

<input type="radio" />

Dateieingabe

Ermöglicht Benutzern, Dateien von ihrem Gerät hochzuladen, aus ihrem lokalen Dateisystem auszuwählen und sie mit Formulardaten zu übermitteln. Diese Funktion ist besonders nützlich beim Anhängen von Dokumenten oder Bildern.

<input type="file" />

Datumseingabe, Zeiteingabe und Datum-Zeit-Eingabe

Ermöglicht Benutzern, Daten, Zeiten oder beides einzugeben. Bietet benutzerfreundliche Schnittstellen zur Auswahl von Daten und Zeiten. Nützlich zum Erfassen von Geburtsdaten, Terminen oder Veranstaltungsplänen.

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

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

Sie haben vielleicht bemerkt, dass das Ausfüllen des Formulars nicht sehr bequem ist, wenn Sie nicht verstehen, was in jedem Feld gefragt wird. Deshalb kommen uns die Labels zu Hilfe.

Labels

Labels (<label>) sind wesentlich, um Textlabels mit Formulareingabeelementen zu verknüpfen, was die Zugänglichkeit und Benutzerfreundlichkeit verbessert. Es ist entscheidend, 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 entsprechende Eingabefeld fokussiert;
• Das label und input sind durch die for- und id-Attribute miteinander verknüpft;
• Beide Attribute for und id haben denselben Wert (username).

Lassen Sie uns das Ausfüllen des Formulars erleichtern, indem wir den Eingaben aus dem vorherigen Beispiel Labels hinzufügen.
Beispiel:

Video Tutorial