Das input-Element: Ein Element, viele Gesichter
Das <input> ist das vielseitigste Element in HTML. Je nach type-Attribut wird daraus ein Textfeld, eine Checkbox, ein Schieberegler oder ein Datumswähler. Es hat keinen Inhalt und kein schließendes Tag, alles läuft über Attribute.
Die wichtigsten Typen
| type | Was es wird |
|---|---|
text | Einzeiliges Textfeld, der Standard wenn type fehlt. |
email, url, tel | Textfelder mit eingebauter Formatprüfung. Handys blenden die passende Tastatur ein. |
password | Verdeckte Eingabe mit Punkten. |
number, range | Zahlenfeld beziehungsweise Schieberegler, begrenzbar mit min, max und step. |
checkbox, radio | Ankreuzkästchen und Auswahlknöpfe. Radios mit gleichem name bilden eine Gruppe, aus der nur einer wählbar ist. |
date, time | Datum und Uhrzeit mit browsereigenem Auswahldialog. |
file | Dateiauswahl zum Hochladen. |
hidden | Unsichtbares Feld das nur Daten mitschickt. |
Beispiel und Demo
HTML-Code
<label for="alter">Dein Alter:</label>
<input type="number" id="alter" name="alter" min="1" max="120">
<label><input type="checkbox" name="retro" checked> Ich mag Retro-Design</label>Ergebnis
Attribute für Prüfung und Komfort
required: Pflichtfeld, ohne Eingabe geht das Formular nicht raus.placeholder: grauer Beispieltext im leeren Feld. Achtung, das ist kein Ersatz für ein label, denn er verschwindet beim Tippen.value: der vorbelegte Wert.maxlength,pattern: Längenbegrenzung und eigene Formatregeln.autocomplete: hilft dem Browser beim sinnvollen Ausfüllen, etwaautocomplete="email".disabledundreadonly: gesperrt beziehungsweise nur lesbar. Der feine Unterschied: readonly-Werte werden mitgesendet, disabled-Werte nichtt.
Typische Fehler
- Felder ohne label. Jedes sichtbare Eingabefeld braucht eine echte Beschriftung.
- Das name-Attribut vergessen, dann kommt beim form nichts an.
- type="number" für Telefonnummern. Führende Nullen fliegen raus, nimm type="tel".
- Sich auf die Browserprüfung verlassen. Die ist Komfort, die echte Prüfung passiert auf dem Servr.