Eingabetypen

HTML bietet verschiedene <input>-Elemente, mit denen Sie unterschiedliche Arten von Daten von Benutzern erfassen können. Lassen Sie uns einige häufig verwendete Eingabetypen erkunden:

email und password

• type="email": wird für E-Mail-Eingabefelder verwendet, die eine gültige E-Mail-Adresse erfordern. Der Browser validiert automatisch die E-Mail-Adresse und fordert den Benutzer auf, ungültige Eingaben zu korrigieren;
• type="password": wird für Passwortfelder verwendet, bei denen der eingegebene Text aus Sicherheitsgründen maskiert wird. Sie können auch die Attribute minLength und maxLength angeben, um Anforderungen an die Passwortlänge festzulegen.

Nummer

type="number": wird für numerische Eingaben verwendet. Sie können einen bestimmten Bereich mit den Attributen min und max definieren und einen bestimmten Schrittwert mit dem Attribut step festlegen.

Telefon

type="tel": vorgesehen für die Eingabe von Telefonnummern, führt jedoch keine Validierung der Eingabe durch. Es liegt in der Verantwortung des Entwicklers, die Eingabe zu validieren und sicherzustellen, dass es sich um eine gültige Telefonnummer handelt.

Kontrollkästchen

type="checkbox": ermöglicht es dem Benutzer, eine oder mehrere Optionen aus vordefinierten Auswahlmöglichkeiten auszuwählen. Das Attribut checked macht ein Kontrollkästchen standardmäßig ausgewählt.

radio

type="radio": erstellt eine Gruppe von Optionen, bei der nur eine Option ausgewählt werden kann. Eine Optionsschaltfläche repräsentiert jede Option, und die Auswahl einer Option hebt automatisch die Auswahl der anderen auf. Jede Optionsschaltfläche sollte ein eindeutiges value-Attribut haben, um sie zu identifizieren.

range

type="range": erstellt ein Schieberegler-Steuerelement, mit dem Benutzer einen Wert innerhalb eines bestimmten Bereichs auswählen können. Sie können die Attribute min, max, step und value anwenden, um das Verhalten zu definieren.

Hinweis

JavaScript ist nicht der Schwerpunkt dieses Kurses, daher wird die dahinterliegende Logik übersprungen.

Datum und Uhrzeit

• type="date": ermöglicht es Benutzern, ein Datum aus einem Kalender-Popup auszuwählen;
• type="time": ermöglicht es Benutzern, eine Uhrzeit im 24-Stunden-Format einzugeben;
• type="datetime-local": kombiniert Zeit- und Datumeingaben.

Beispiel:

Hinweis

Für ein konsistentes Styling auf verschiedenen Geräten werden oft fertige Lösungen für Popup-Kalender und Zeiteingaben verwendet.