<input>

Zuletzt aktualisiert am 3. Juli 2026

Das <input>-Element ist das Chamäleon unter den HTML-Elementen: Ein einziges Tag, das je nach type-Attribut völlig unterschiedlich aussieht und funktioniert: Textfeld, Checkbox, Datumsauswahl, Farbpicker, Schieberegler und vieles mehr. Wenn du ein Formular baust, wirst du <input> häufiger verwenden als jedes andere Element. Auf dieser Seite lernst du die wichtigsten Typen kennen, warum Labels so wichtig sind und welche Fehler du vermeiden solltest.

Grundlagen

Das Herzstück von <input> ist das type-Attribut. Es bestimmt, was der Nutzer sieht und eingeben kann. Wenn du kein type angibst, ist der Standard text, ein einfaches einzeiliges Textfeld. Genauso wichtig wie der Typ ist das Label: Jedes Eingabefeld braucht ein <label>, damit Nutzer wissen, was sie eingeben sollen.

Ein <label> ist nicht nur ein beschreibender Text, es hat zwei konkrete Vorteile: Erstens vergrößert es die Klickfläche, denn wenn du auf das Label klickst, fokussiert der Browser automatisch das zugehörige Eingabefeld. Das ist besonders bei kleinen Elementen wie Checkboxen und Radio-Buttons hilfreich. Zweitens liest ein Screenreader das Label vor, wenn ein blinder Nutzer das Feld fokussiert. Ohne Label hört er nur “Eingabefeld, leer”, was nicht hilfreich ist.

• <input> ist ein Void-Element: Es hat keinen schließenden Tag, du schreibst einfach <input>
• Das type-Attribut bestimmt Aussehen und Verhalten, von Textfeld bis Farbauswahl
• Standard-Typ ist text, wenn kein type angegeben wird
• Verknüpfe jedes Input immer mit einem <label>: entweder über for/id oder indem du das <input> innerhalb des <label> platzierst

Syntax

<label for="vorname">Vorname:</label>
<input type="text" id="vorname" name="vorname" placeholder="Max">

Attribute

Wichtige type-Werte

Beispiele

Verschiedene Input-Typen

Hier siehst du die gängigsten Input-Typen im Vergleich. Jeder Typ verändert das Aussehen und Verhalten des Eingabefelds. Probiere sie in der Vorschau aus:

<input type="text" placeholder="Dein Name">
<input type="email" placeholder="name@example.com">
<input type="password" placeholder="Geheim...">
<input type="number" min="1" max="10" value="5">
<input type="date">

Checkbox und Radio

Checkboxen und Radio-Buttons funktionieren anders als Textfelder. Checkboxen sind für Mehrfachauswahl (du kannst beliebig viele ankreuzen), Radio-Buttons für Einfachauswahl (nur eine Option pro Gruppe). Bei Radio-Buttons ist der gemeinsame name entscheidend, er definiert die Gruppe:

<!-- Checkbox: Mehrfachauswahl -->
<label><input type="checkbox" name="interesse" value="html"> HTML</label>
<label><input type="checkbox" name="interesse" value="css"> CSS</label>
<label><input type="checkbox" name="interesse" value="js"> JavaScript</label>

<!-- Radio: Einfachauswahl -->
<label><input type="radio" name="level" value="anfaenger"> Anfänger</label>
<label><input type="radio" name="level" value="fortgeschritten"> Fortgeschritten</label>
<label><input type="radio" name="level" value="profi"> Profi</label>

Range und Color

Nicht jede Eingabe braucht ein Textfeld. Für Werte auf einer Skala gibt es den Schieberegler (range), für Farben den nativen Farbpicker (color):

<label for="r">Lautstärke:</label>
<input type="range" id="r" min="0" max="100" value="75">

<label for="c">Lieblingsfarbe:</label>
<input type="color" id="c" value="#4338ca">

Barrierefreiheit

Das <input>-Element ist eines der am häufigsten genutzten interaktiven Elemente im Web, und gleichzeitig eines, bei dem Barrierefreiheit oft zu kurz kommt. Hier die wichtigsten Punkte:

Label-Verknüpfung ist nicht optional. Jedes <input> braucht ein <label>. Es gibt zwei Wege: Entweder über for/id (<label for="email"> + <input id="email">) oder indem du das <input> direkt im <label> platzierst (<label>E-Mail: <input></label>). Beide Varianten funktionieren gleich gut für Screenreader. Ohne Label hört ein blinder Nutzer nur “Eingabefeld, leer” und hat keine Ahnung, was er eingeben soll.

aria-describedby für Hilfetexte und Fehlermeldungen. Wenn unter einem Feld ein Hinweis steht (z.B. “Mindestens 8 Zeichen”), verknüpfe ihn mit aria-describedby. Der Screenreader liest dann beim Fokussieren des Feldes: “Passwort, Eingabefeld. Mindestens 8 Zeichen.” Das funktioniert genauso für Fehlermeldungen.

<label for="pw">Passwort:</label>
<input type="password" id="pw" aria-describedby="pw-help">
<span id="pw-help">Mindestens 8 Zeichen</span>

required und aria-invalid richtig einsetzen. Das required-Attribut signalisiert Screenreadern, dass ein Feld ausgefüllt werden muss. Wenn die Validierung fehlschlägt, setze aria-invalid="true" auf das Feld. Der Screenreader sagt dann “ungültig” beim Fokussieren.

Fokus-Management bei dynamischen Formularen. Wenn nach einer Aktion neue Felder erscheinen oder eine Fehlermeldung eingeblendet wird, setze den Fokus programmatisch auf das relevante Element. Nutzer, die nur mit der Tastatur arbeiten, sehen und hören sonst nicht, dass sich etwas geändert hat.

Häufige Fehler

• Kein <label>: Ein Eingabefeld ohne Label ist wie ein Formularfeld ohne Beschriftung. Sehende Nutzer können vielleicht aus dem Kontext schließen, was gemeint ist, aber ein Screenreader liest nur “Eingabefeld, leer” vor. Verknüpfe jedes <input> entweder über <label for="id"> oder indem du das Input direkt im <label> platzierst.

• Fehlender name: Ohne name-Attribut werden die Daten beim Absenden nicht an den Server übermittelt. Das Feld ist dann zwar sichtbar und bedienbar, aber seine Eingabe verschwindet einfach beim Absenden.

• Radio-Buttons ohne gemeinsamen name: Wenn Radio-Buttons nicht denselben name haben, funktioniert die Einfachauswahl nicht. Der Nutzer kann dann mehrere Optionen gleichzeitig auswählen, was den Sinn von Radio-Buttons verfehlt.

• type="number" für Telefonnummern oder PLZ: Telefonnummern können mit + beginnen und Leerzeichen oder Bindestriche enthalten, das erlaubt number nicht. Postleitzahlen wie 01234 verlieren die führende Null, weil number sie als Zahl 1234 interpretiert. Verwende type="tel" für Telefonnummern und type="text" mit pattern-Attribut für Postleitzahlen.

Browser-Kompatibilität

Basis-Typen (text, password, checkbox, radio) werden universell unterstützt. Auch Typen wie date, color und range werden von allen modernen Browsern unterstützt. Unbekannte Typen fallen automatisch auf text zurück.

Email-Kompatibilität

Eingabefelder werden von den meisten Email-Clients aus Sicherheitsgründen nicht unterstützt. Interaktive Formularelemente werden in der Regel entfernt.

Verwandte Elemente