Input

Inputs werden verwendet, um einzeilige Texteingaben innerhalb von Formularen zu erfassen.
Sie unterstützen Zustände wie Placeholder, Disabled, Readonly und Error.

Beispiele

Basic


<input class="a-input" type="text" value="Max Mustermann">

Placeholder


<input class="a-input" type="text" placeholder="Name eingeben">

Disabled


<input class="a-input" type="text" value="Nicht verfügbar" disabled>

Readonly


<input class="a-input" type="text" value="Nur lesbar" readonly>

Error


<input class="a-input -error" type="text" value="Ungültiger Wert">

Klassen

Klasse / Attribut	Beschreibung
`.a-input`	Basis-Klasse für einzeilige Eingabefelder.
`.-error`	Modifikator für fehlerhafte Eingaben.
`disabled`	Deaktiviert das Eingabefeld.
`readonly`	Markiert das Eingabefeld als nur lesbar.
`placeholder`	Zeigt einen kurzen Hinweis an, solange kein Wert eingetragen ist.

Hinweise

Inputs sollten später meistens innerhalb einer Form Group verwendet werden, damit Label, Hilfetext und Fehlermeldung sauber zusammengehören.

Best Practices

Verwende Inputs für kurze, einzeilige Texteingaben wie Namen, E-Mail-Adressen oder Suchbegriffe.

Verwende Placeholder nicht als Ersatz für Labels. Placeholder verschwinden beim Tippen und sind deshalb keine zuverlässige Beschriftung.

Accessibility

Jedes Input sollte mit einem sichtbaren <label> oder einem geeigneten aria-label verbunden sein.

Fehler sollten nicht nur über Farbe dargestellt werden. Ergänze später eine sichtbare Fehlermeldung und verknüpfe sie mit dem Eingabefeld.