Formulareingabe- und Bezeichnungselemente

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.

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.

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.

Telefon-Eingabe

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

Zahlen-Eingabe

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

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.

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.

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.

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.

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:

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