Summary  
This chapter explores various HTML input types and their attributes for collecting and validating user data, including email, password, numeric ranges, telephone numbers, selection controls, and date/time pickers.

General domain of usage  
Web form development

HTML bietet viele `<input>`-Typen, mit denen verschiedene Arten von Benutzerdaten erfasst werden können. Nachfolgend eine Übersicht der gebräuchlichsten Typen.

## E-Mail und Passwort
- `type="email"`: akzeptiert E-Mail-Adressen und führt eine grundlegende Browser-Validierung durch;
- `type="password"`: verbirgt die eingegebenen Zeichen zur Sicherheit und kann `minlength` und `maxlength` verwenden.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPCEtLSBFbWFpbCBpbnB1dCAtLT4KICA8bGFiZWwgZm9yPSJtYWlsIj5FbWFpbDwvbGFiZWw+CiAgPGlucHV0IHR5cGU9ImVtYWlsIiBpZD0ibWFpbCIgLz4KICAKICA8IS0tIFBhc3N3b3JkIGlucHV0IC0tPgogIDxsYWJlbCBmb3I9InBhc3N3b3JkIj5QYXNzd29yZDwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InBhc3N3b3JkIiBpZD0icGFzc3dvcmQiIC8+CiAgCiAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlN1Ym1pdDwvYnV0dG9uPgo8L2Zvcm0+

## Zahl
`type="number"`: akzeptiert numerische Werte. Verwenden Sie `min`, `max` und `step`, um den erlaubten Bereich zu steuern.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0ieWVhciI+WWVhciBvZiBiaXJ0aDwvbGFiZWw+CiAgPGlucHV0IHR5cGU9Im51bWJlciIgbWluPSIxOTAwIiBtYXg9IjIwMjMiIGlkPSJ5ZWFyIiAvPgoKICA8bGFiZWwgZm9yPSJoZWlnaHQiPkhlaWdodCB3aXRoIDAuMSBzdGVwPC9sYWJlbD4KICA8aW5wdXQgdHlwZT0ibnVtYmVyIiBpZD0iaGVpZ2h0IiBzdGVwPSIwLjEiIG1pbj0iMC4xIiBtYXg9IjEwLjAiIC8+CgogIDxidXR0b24gdHlwZT0ic3VibWl0Ij5TdWJtaXQ8L2J1dHRvbj4KPC9mb3JtPg==

## Telefon
`type="tel"`: für Telefonnummern. Keine integrierte Validierung. Entwickler validieren dies manuell.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0icGhvbmUiPlBob25lIG51bWJlcjo8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJ0ZWwiIGlkPSJwaG9uZSIgLz4KCiAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlN1Ym1pdDwvYnV0dG9uPgo8L2Zvcm0+

## Kontrollkästchen
`type="checkbox"`: ermöglicht die Auswahl mehrerer Optionen. Mit `checked` wird eine Vorauswahl getroffen.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPHA+V2hhdCBpcyB5b3VyIGZhdm9yaXRlIHNlYXNvbj88L3A+CiAgPGxhYmVsPgogICAgV2ludGVyCiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIG5hbWU9IndpbnRlciIgdmFsdWU9IndpbnRlciIgY2hlY2tlZCAvPgogIDwvbGFiZWw+CiAgPGxhYmVsPgogICAgU3ByaW5nCiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIG5hbWU9InNwcmluZyIgdmFsdWU9InNwcmluZyIgLz4KICA8L2xhYmVsPgogIDxsYWJlbD4KICAgIFN1bW1lcgogICAgPGlucHV0IHR5cGU9ImNoZWNrYm94IiBuYW1lPSJzdW1tZXIiIHZhbHVlPSJzdW1tZXIiIC8+CiAgPC9sYWJlbD4KICA8bGFiZWw+CiAgICBGYWxsCiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIG5hbWU9ImZhbGwiIHZhbHVlPSJmYWxsIiAvPgogIDwvbGFiZWw+CjwvZm9ybT4=

## Radio
`type="radio"`: Auswahl einer Option aus einer Gruppe. Alle Radio-Buttons müssen denselben `name`-Wert haben.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPHA+V2hhdCBpcyB5b3VyIGZhdm9yaXRlIGZvb2Q/PC9wPgogIDxsYWJlbD4KICAgIDxpbnB1dCB0eXBlPSJyYWRpbyIgbmFtZT0iZGlzaCIgdmFsdWU9InBhc3RhIiBjaGVja2VkIC8+CiAgICBQYXN0YQogIDwvbGFiZWw+CiAgPGxhYmVsPgogICAgPGlucHV0IHR5cGU9InJhZGlvIiBuYW1lPSJkaXNoIiB2YWx1ZT0icGl6emEiIC8+CiAgICBQaXp6YQogIDwvbGFiZWw+CiAgPGxhYmVsPgogICAgPGlucHV0IHR5cGU9InJhZGlvIiBuYW1lPSJkaXNoIiB2YWx1ZT0iYnVyZ2VyIiAvPgogICAgQnVyZ2VyCiAgPC9sYWJlbD4KICA8bGFiZWw+CiAgICA8aW5wdXQgdHlwZT0icmFkaW8iIG5hbWU9ImRpc2giIHZhbHVlPSJzdGVhayIgLz4KICAgIFN0ZWFrCiAgPC9sYWJlbD4KPC9mb3JtPg==

## Bereichsregler
`type="range"`: Schieberegler zur Auswahl einer Zahl innerhalb eines Bereichs. JavaScript-Logik wird in diesem Kurs ausgelassen.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0iZGF5Ij5EYXkgb2YgdGhlIHdlZWs8L2xhYmVsPgogIDxpbnB1dCBpZD0iZGF5IiB0eXBlPSJyYW5nZSIgdmFsdWU9IjUiIG1pbj0iMSIgbWF4PSI3IiBzdGVwPSIxIiAvPgo8L2Zvcm0+CjxwPlNlbGVjdGVkIHZhbHVlOiA8c3BhbiBjbGFzcz0ic2VsZWN0ZWQtdmFsdWUiPjU8L3NwYW4+PC9wPgo8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0Pg==

Y29uc3QgcmFuZ2VJbnB1dCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ2lucHV0W3R5cGU9InJhbmdlIl0nKTsKY29uc3Qgb3V0cHV0ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignLnNlbGVjdGVkLXZhbHVlJyk7CnJhbmdlSW5wdXQuYWRkRXZlbnRMaXN0ZW5lcignaW5wdXQnLCBlID0+IChvdXRwdXQudGV4dENvbnRlbnQgPSBlLnRhcmdldC52YWx1ZSkpOw==

JavaScript-Logik wird in diesem Kurs ausgelassen.

Hinweis

## Datum und Uhrzeit
- `type="date"`: Kalenderauswahl;
- `type="time"`: Zeitauswahl;
- `type="datetime-local"`: kombiniert Zeit- und Datumseingabe.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPCEtLSBEYXRlIGlucHV0IC0tPgogIDxsYWJlbCBmb3I9ImRhdGUiPkRhdGU8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJkYXRlIiBtaW49IjE5NzAtMDEtMDEiIG1heD0iMjA3MC0wMS0wMSIgaWQ9ImRhdGUiIC8+CgogIDwhLS0gVGltZSBpbnB1dCAtLT4KICA8bGFiZWwgZm9yPSJ0aW1lIj5UaW1lPC9sYWJlbD4KICA8aW5wdXQgdHlwZT0idGltZSIgaWQ9InRpbWUiIC8+CgogIDwhLS0gRGF0ZSBhbmQgVGltZSBpbnB1dCAtLT4KICA8bGFiZWwgZm9yPSJmdWxsLXRpbWUiPkRhdGUgYW5kIFRpbWU8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJkYXRldGltZS1sb2NhbCIgbWluPSIxOTAwLTAxLTAxVDAwOjAwIiBtYXg9IjIwMDAtMDEtMDFUMDA6MDAiIGlkPSJmdWxsLXRpbWUiIC8+CjwvZm9ybT4=

Für ein einheitliches Styling verwenden Entwickler häufig vorgefertigte UI-Bibliotheken anstelle der standardmäßigen Browser-Auswahlfelder.

Vielleicht ist Ihnen aufgefallen, dass der Browser bei bestimmten Feldern bereits einige Auto-Ausfülloptionen vorschlagen kann. Der Browser merkt sich die von Ihnen eingegebenen Werte und schlägt diese dann zur automatischen Vervollständigung vor.

Mehr erfahren

Was ist der Hauptunterschied zwischen den Eingabefeldern `type="email"` und `type="password"`?

Erlernen Sie die Grundlagen von HTML (HyperText Markup Language), dem Fundament der Webentwicklung. Dieser einsteigerfreundliche Kurs behandelt Tags, Attribute, Elemente und die Strukturierung von Webseiten. Erwerben Sie praktische Fähigkeiten im Erstellen von Überschriften, Absätzen, Listen, Bildern, Links, Formularen und Tabellen. Entdecken Sie Best Practices, Optimierung und Webzugänglichkeit. Beginnen Sie Ihre Webentwicklungsreise mit HTML.

Erkunden Sie die Funktionsweise des Webs. Erfahren Sie, wie Daten über Netzwerke übertragen werden, entdecken Sie die Rolle von Protokollen und entschlüsseln Sie die Geheimnisse von IP-Adressen und Domainnamen. Gewinnen Sie ein grundlegendes Verständnis darüber, wie Webbrowser und Server miteinander kommunizieren, um Webinhalte bereitzustellen.

Erkunden Sie die Möglichkeiten von Tags zur Strukturierung von Inhalten, von Überschriften und Absätzen bis hin zu Listen und Tabellen. Erfahren Sie, wie Sie Elemente mit Attributen erweitern können.

Der Kern der HTML-Dokumentstruktur. Lernen Sie die Bestandteile eines HTML-Dokuments kennen, einschließlich der Doctype-Deklaration, des Head- und Body-Bereichs. Verstehen Sie den Zweck jedes Elements und wie sie zur Gesamtstruktur einer Webseite beitragen.

Gestaltung einer ansprechenderen Webseite durch den Einsatz von Medien wie Bildern, Audio und Video. Umgang mit strukturierten tabellarischen Daten in Form von Tabellen.

Erkunden Sie die Vielseitigkeit von HTML-Formularen. Lernen Sie, intuitive und benutzerfreundliche Formulare durch Anwendung zentraler Konzepte und Techniken zu gestalten. Entdecken Sie, wie Formulare die Benutzerinteraktion und Datenübermittlung auf Websites ermöglichen.

Untersuchung Verschiedener Eingabetypen in HTML

E-Mail und Passwort

Zahl

Telefon

Kontrollkästchen

Radio

Bereichsregler

Datum und Uhrzeit