HTML stellt verschiedene <input>-Elemente bereit, mit denen unterschiedliche Datentypen von Benutzern erfasst werden können. Im Folgenden werden einige häufig verwendete Eingabetypen vorgestellt:

email und password

• type="email": Wird für E-Mail-Eingabefelder verwendet, die eine gültige E-Mail-Adresse erfordern. Der Browser validiert die E-Mail-Adresse automatisch 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. Mit den Attributen minLength und maxLength können Anforderungen an die Passwortlänge festgelegt werden.

number

type="number": Wird für numerische Eingaben verwendet. Mit den Attributen min und max kann ein bestimmter Wertebereich festgelegt werden, und mit dem Attribut step kann ein bestimmter Schrittwert definiert werden.

telephone

type="tel": Gedacht für die Eingabe von Telefonnummern, jedoch erfolgt keine Validierung der Eingabe. Die Überprüfung und Sicherstellung einer gültigen Telefonnummer obliegt dem Entwickler.

Kontrollkästchen

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

radio

type="radio": Erstellt eine Auswahl von Optionen, bei der nur eine Option ausgewählt werden kann. Jede Option wird durch eine Optionsschaltfläche dargestellt, und die Auswahl einer Option hebt automatisch die Auswahl der anderen auf. Jede Optionsschaltfläche sollte ein eindeutiges value-Attribut zur Identifikation besitzen.

range

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

Hinweis

JavaScript steht in diesem Kurs nicht im Mittelpunkt, daher wird die dahinterliegende Logik ausgelassen.

Datum und Uhrzeit

• type="date": ermöglicht die Auswahl eines Datums über ein Kalender-Popup;

• type="time": ermöglicht die Eingabe einer Uhrzeit im 24-Stunden-Format;

• type="datetime-local": kombiniert Datums- und Zeiteingabe.

Beispiel:

Hinweis

Für ein einheitliches Erscheinungsbild auf verschiedenen Geräten werden häufig vorgefertigte Lösungen für Popup-Kalender und Zeiteingaben verwendet.