Effektiver Einsatz von Formulareingaben und Beschriftungen
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.
index.html
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 dasinput
sind über die Attributefor
undid
miteinander verknüpft; - Beide Attribute,
for
undid
, haben denselben Wert (username
).
Das Ausfüllen des Formulars wird erleichtert, indem den Eingabefeldern aus dem vorherigen Beispiel Beschriftungen hinzugefügt werden.
Beispiel:
index.html
Video-Tutorial
1. Welches Attribut des <label>
-Tags wird verwendet, um es mit einem bestimmten <input>
-Element in einem Formular zu verknüpfen?
2. Welches Attribut fehlt beim Input-Element, das mit dem Label-Element verknüpft werden muss?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 3.13
Effektiver Einsatz von Formulareingaben und Beschriftungen
Swipe um das Menü anzuzeigen
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.
index.html
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 dasinput
sind über die Attributefor
undid
miteinander verknüpft; - Beide Attribute,
for
undid
, haben denselben Wert (username
).
Das Ausfüllen des Formulars wird erleichtert, indem den Eingabefeldern aus dem vorherigen Beispiel Beschriftungen hinzugefügt werden.
Beispiel:
index.html
Video-Tutorial
1. Welches Attribut des <label>
-Tags wird verwendet, um es mit einem bestimmten <input>
-Element in einem Formular zu verknüpfen?
2. Welches Attribut fehlt beim Input-Element, das mit dem Label-Element verknüpft werden muss?
Danke für Ihr Feedback!