Zum Inhalt springen

input-Element

oder auch Eingabefeld

Männliche Person, frontal, schaut in die Kamera; trägt kariertes Hemd über dunkelfarbigem T‑Shirt; heller Innenraum mit unscharfem Monitor oder Poster links und Fenster rechts.

von Richard Albrecht am 18.10.2026

Das input-Element ist das vielseitigste im Web: Je nach Typ wird daraus ein Textfeld, ein Datumswähler, ein Schalter oder ein Dateiauswahlfeld.

input-Element

Element für Eingaben, dessen Erscheinung und Verhalten vom Attribut type abhängen.
Beispiel: „Ein input-Element hat keinen Inhalt und kein schließendes Tag.“

Auch: Eingabefeld.

Der Typ macht den Unterschied

Ein Formular in einem beschrifteten Rahmen: Textfeld, Auswahlliste, zwei Radioschalter, eine Checkbox, ein mehrzeiliges Feld und ein Absendeknopf, jeweils rechts mit ihrem Markup benannt.
Textfeld, Radioschalter und Checkbox sind dasselbe Element; allein das Attribut type unterscheidet sie.
<input type="email" name="mail" required>
<input type="tel" name="telefon">
<input type="date" name="termin">

Auf dem Telefon erscheint je nach Typ eine andere Tastatur: mit Klammeraffe bei E-Mail, mit Ziffernblock bei Telefon. Dazu kommt die eingebaute Prüfung des Formats. Beides kostet nichts außer dem richtigen Wort im Attribut.

Was autocomplete leistet

Mit autocomplete und den vorgesehenen Werten füllen Browser und Passwortmanager Felder zuverlässig aus. Für Anschriften und Zahlungsdaten verkürzt das die Eingabe erheblich, besonders auf dem Telefon.

Siehe auch:

form-Element

Umschließt die Felder und bestimmt, wohin die Eingaben gehen.

#Frontend-Entwicklung (HTML, CSS, JavaScript)

label-Element

Die Beschriftung, die am Feld hängt.

#Frontend-Entwicklung (HTML, CSS, JavaScript)

Checkbox

Ein Kästchen zum Anhaken, unabhängig von anderen.

#Frontend-Entwicklung (HTML, CSS, JavaScript)

Radiobutton

Eine Gruppe, von der genau eines gewählt wird.

#Frontend-Entwicklung (HTML, CSS, JavaScript)

HTML-Formularvalidierung (required)

Der Browser prüft Eingaben, bevor Code dazukommt.

#Frontend-Entwicklung (HTML, CSS, JavaScript)

placeholder-Attribut

Der graue Hinweistext in einem leeren Feld.

#Frontend-Entwicklung (HTML, CSS, JavaScript)