Input-Feld-Generator
Textfelder gestalten: Outline, gefüllt oder unterstrichen, Fokus-Ring, Platzhalter und Fehlerzustand – HTML und CSS kopieren.
Der Input-Feld-Generator gestaltet Textfelder für Formulare in drei Varianten: mit Rahmen, gefüllt oder unterstrichen. Du stellst Größe, Radius, Farben, Platzhalter, Fokus-Ring und Fehlerfarbe ein. Der Code nutzt :focus-visible und :user-invalid, sodass Fehler erst nach einer Eingabe rot erscheinen und nicht schon beim Laden.
<div class="field">
<label for="email">E-Mail-Adresse</label>
<input class="input" id="email" type="email" name="email" placeholder="name@beispiel.de" required>
<p class="hint">Wir geben deine Adresse nicht weiter.</p>
</div>Gute Eingabefelder gestalten
Ein Eingabefeld braucht vier Zustände: normal, Hover, Fokus und Fehler. Der Fokus sollte deutlich sichtbar sein, etwa durch eine farbige Kontur und einen weichen Ring. Fehler erkennt man nicht nur an der Farbe; ein Hinweistext unter dem Feld erklärt, was fehlt.
| Variante | Wirkung | Typischer Einsatz |
|---|---|---|
| Rahmen | Klar abgegrenzt | Formulare, Checkout |
| Gefüllt | Ruhig, flächig | Suchfelder, Apps |
| Unterstrichen | Leicht, minimal | Login, kurze Formulare |
Prüfe Platzhalter und Rahmen mit dem Farbkontrast-Prüfer: Für Rahmen von Bedienelementen gelten mindestens 3 : 1.
Häufige Fragen
Was ist :user-invalid?
:user-invalid trifft ein ungültiges Feld erst, nachdem jemand damit interagiert hat. Anders als :invalid färbt es Pflichtfelder also nicht schon beim Laden rot. Probiere es in der Vorschau: Tippe eine unvollständige E-Mail-Adresse und verlasse das Feld.
Reicht der Platzhalter als Beschriftung?
Nein. Der Platzhalter verschwindet beim Tippen und hat oft zu wenig Kontrast. Ein sichtbares label-Element über dem Feld ist für Barrierefreiheit und Nutzbarkeit Pflicht, der Platzhalter zeigt nur ein Beispiel.
Warum ist die Schriftgröße mindestens 16 px?
Safari auf dem iPhone zoomt in Felder mit kleinerer Schrift hinein, sobald sie den Fokus bekommen. Mit 16 px oder mehr bleibt die Ansicht stabil.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.