Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Effektiver Einsatz von Formulareingaben und Beschriftungen | Tabellen und Formulare
HTML-Grundlagen

bookEffektiver 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

index.html

copy

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:

index.html

index.html

copy

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?

question mark

Welches Attribut des <label>-Tags wird verwendet, um es mit einem bestimmten <input>-Element in einem Formular zu verknüpfen?

Select the correct answer

question mark

Welches Attribut fehlt beim Input-Element, das mit dem Label-Element verknüpft werden muss?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 5

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 3.13

bookEffektiver 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

index.html

copy

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:

index.html

index.html

copy

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?

question mark

Welches Attribut des <label>-Tags wird verwendet, um es mit einem bestimmten <input>-Element in einem Formular zu verknüpfen?

Select the correct answer

question mark

Welches Attribut fehlt beim Input-Element, das mit dem Label-Element verknüpft werden muss?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 5
some-alt