Placeholder vs. Label: Warum Platzhaltertext kein Label ist und welche Feld-Spezifikation du stattdessen nutzt
Grauer Text im Feld verschwindet, sobald jemand tippt. Warum ein Platzhalter kein Label ersetzen kann, wohin Hinweise gehören, welche Rahmenfarbe besteht und die genaue Feld-Spezifikation für deinen Entwickler.
Ein Platzhalter ist kein Label. Er verschwindet in dem Moment, in dem jemand tippt, und mit ihm der einzige Hinweis darauf, wofür das Feld gedacht war. Setze über jedes Feld ein echtes Label, Hinweise darunter, einen sichtbaren Rahmen drumherum und nutze den Platzhalter nur für ein Beispiel. Hier das Warum und die genaue Spezifikation.
Was schiefgeht, wenn der Platzhalter das Label ist
Vor dem Tippen: sieht aufgeräumt aus
✕ Nach dem Tippen: wofür war dieses Feld nochmal?
Das linke Feld sieht ordentlich aus, deshalb mögen Designer es. Das rechte Feld ist dasselbe Feld zwei Sekunden später. Das Wort „E-Mail“ ist weg, die Person hat kein Label zum Nachsehen, und in einem langen Formular kann sie nicht mehr sagen, welche Antwort zu welchem Feld gehört.
Das ist ein Gedächtnisproblem, keine Geschmackssache. Die Untersuchung der Nielsen Norman Group zu Platzhaltern in Formularfeldern ergab, dass verschwindender Text das Kurzzeitgedächtnis belastet und es schwer macht, Antworten vor dem Absenden zu prüfen. Unser allgemeiner Leitfaden zu Best Practices für Formulardesign deckt das ganze Formular ab; dieses Paper geht tief in die eine Entscheidung, die die meisten Probleme verursacht.
Es gibt ein zweites Problem. Platzhaltertext ist standardmäßig grau, und dieses Grau ist meist zu blass. Das gängige Platzhalter-Grau #8E8E93 hat auf Weiß einen Kontrast von etwa 3,3 zu 1, unter den 4,5 zu 1, die WCAG für Text verlangt. Der eine Hinweis, den du gegeben hast, ist also auch noch schwer lesbar.
Lösung 1: ein echtes Label über dem Feld
✓ Label oben: bleibt auch nach dem Tippen da
Geschäftliche E-Mail
✓ Platzhalter nur als Beispiel
Ein Label sitzt außerhalb des Felds, Tippen berührt es also nie. Setze es über das Feld, linksbündig, mit 15 px in semibold. Oben ist besser als daneben, weil es bei jeder Breite funktioniert, auch auf dem Handy, und das Auge sich in einer geraden Linie durch das Formular nach unten bewegt.
Versteck das Label nicht, um Platz zu sparen. Wenn ein Design keinen Platz für Labels hat, ist das Design falsch, nicht die Regel. Floating Labels, die beim Fokus in die Ecke schrumpfen, sind ein Kompromiss: Sie behalten das Label, aber es ist klein, braucht sorgfältiges Timing und ist schwerer barrierefrei umzusetzen als ein schlichtes Label oben.
Ein echtes Label ist außerdem das, was Screenreader vorlesen. Verbinde es in HTML mit dem Feld, damit ein Tipp auf das Label das Eingabefeld fokussiert:
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email"
placeholder="name@company.com" />
Lösung 2: Hinweise gehören unter das Feld
Passwort
Mindestens 8 Zeichen.
✓ Hinweis unter dem Feld: bleibt beim Tippen sichtbar
✕ Hinweis als Platzhalter: bei der ersten Taste weg
Das Nützlichste, was ein Feld sagen kann, etwa ein Format oder eine Regel, brauchen Leute genau während des Tippens. Es kann also nicht im Platzhalter stehen, wo es beim ersten Tastenanschlag verschwindet. Setze es unter das Feld, mit 13 px in einem ruhigeren Grau, wo es die ganze Zeit sichtbar bleibt.
Fehler nutzen denselben Platz. Wenn etwas schiefgeht, kann sich die Hinweiszeile in die Fehlermeldung verwandeln, und das Layout bleibt stabil. Unser Paper zur Farbe von Fehlermeldungen zeigt, wie diese Meldung aussehen sollte.
Lösung 3: ein Rahmen, den man sieht
✕ Rahmen #E5E5E5: ein Geist
✓ Rahmen #79747E: leicht zu finden
Ein Feld ist ein Bedienelement, und ein Bedienelement muss auffindbar sein. Der geisterhaft graue Rahmen links ist ein Liebling von Design-Dateien, weil er leicht wirkt. Auf einem echten Bildschirm verschwindet er fast, und Leute wissen nicht, wohin sie tippen sollen.
WCAG 1.4.11 verlangt, dass die visuelle Information, die zur Erkennung einer Bedienoberflächenkomponente nötig ist, mindestens 3 zu 1 gegenüber der angrenzenden Farbe hat. #E5E5E5 auf Weiß liegt bei etwa 1,3 zu 1, das fällt durch. #79747E, die Outline-Farbe von Material 3, liegt bei etwa 4,6 zu 1 und besteht locker. Nimm 1,5 px, damit er auch auf Bildschirmen mit niedriger Dichte hält.
Beachte den Unterschied zu Trennlinien. Ein helles Grau wie #E5E5EA ist zwischen Listenzeilen in Ordnung, denn eine Trennlinie muss nur bemerkt werden. Ein Feldrahmen muss gesehen werden. Trennlinien und Flächengrau haben wir in Hintergrundfarbe im Light Mode behandelt.
Lösung 4: die richtige Tastatur anfordern
Ein Feld, das weiß, wofür es da ist, kann die hilfreiche Tastatur öffnen, auf iPhone und Android gleichermaßen. Ein E-Mail-Feld, das mit bereitliegender @-Taste öffnet, spart einen Tipp und verhindert bei jedem Zeichen Tippfehler. In HTML ist es ein einziges Attribut:
| Feld | Eingabetyp | Was das Handy öffnet |
|---|---|---|
type="email" | Tastatur mit @ und . | |
| Telefon | type="tel" | Zahlenblock |
| Website | type="url" | Tastatur mit / und .com |
| Karte oder Code | inputmode="numeric" | Zahlenblock, ohne Spinner |
| Suche | type="search" | Suchtaste auf der Tastatur |
Kombiniere das mit autocomplete-Werten wie email und name, damit das Handy das Feld selbst ausfüllen kann.
Die Feld-Spezifikation
| Teil | Wert |
|---|---|
| Label | Über dem Feld, 15 px, semibold |
| Feld | 48 px hoch, 12 px Radius |
| Rahmen | 1,5 px in #79747E |
| Text | 16 px, nie kleiner |
| Hinweis | Unter dem Feld, 13 px |
| Platzhalter | Ein Beispiel oder nichts |
Text mit 16 px ist auf dem iPhone wichtig: Safari zoomt die Seite heran, wenn jemand ein Feld mit kleinerem Text antippt, und das fühlt sich wie ein Bug an.
.field label { font: 600 15px/1.3 system-ui; display: block; margin-bottom: 6px; }
.field input {
height: 48px;
padding: 0 14px;
font-size: 16px;
border: 1.5px solid #79747E;
border-radius: 12px;
}
.field input::placeholder { color: #8E8E93; }
.field .hint { font-size: 13px; margin-top: 6px; }
Die Höhe von 48 px liefert ein angenehmes Touch-Ziel, und der Radius von 12 px ist eine Wahl, keine Regel: Passe ihn an dein System an und halte ihn bei jedem Feld gleich.
FAQ
Soll ich einen Platzhalter statt eines Labels verwenden?
Nein. Ein Platzhalter verschwindet, sobald jemand tippt, und das Feld verliert seinen Namen. Setze ein sichtbares Label über das Feld und nutze den Platzhalter für ein Beispielformat oder lass ihn leer.
Ist Platzhaltertext barrierefrei?
Standardmäßig selten. Platzhaltertext ist meist ein helles Grau mit niedrigem Kontrast, er verschwindet bei der Eingabe, und manche Hilfstechnologien behandeln ihn nicht als Label. Ein echtes, mit dem Eingabefeld verbundenes Label ist die barrierefreie Wahl.
Wohin gehört das Label: über oder in das Feld?
Darüber, linksbündig. Es funktioniert bei jeder Bildschirmbreite, bleibt beim Tippen sichtbar, und das Auge folgt einer geraden Linie durch das Formular.
Was soll ich in einen Platzhalter schreiben?
Ein Beispiel für das Format, etwa name@company.com, oder gar nichts. Schreibe nie die Anweisung hinein, die Leute beim Tippen brauchen. Die gehört als Hinweis unter das Feld.
Welche Farbe sollte ein Eingaberahmen haben?
Dunkel genug, um gegenüber der Seite mindestens 3 zu 1 zu erreichen, wie WCAG 1.4.11 es verlangt. #79747E, die Outline-Farbe von Material 3, liegt auf Weiß bei etwa 4,6 zu 1. Ein blasses #E5E5E5 liegt bei etwa 1,3 zu 1 und fällt durch.
Lösen Floating Labels das Platzhalterproblem?
Teilweise. Sie halten ein Label sichtbar, indem sie es über dem Text verkleinern, aber die geringe Größe, die Animation und der Barrierefreiheits-Aufwand machen ein schlichtes Label über dem Feld zum sichereren Standard.
Quellen
- Nielsen Norman Group, Placeholders in Form Fields Are Harmful (Katie Sherwin, 2014): Platzhaltertext verschwindet beim Tippen, belastet das Kurzzeitgedächtnis und erschwert die Prüfung von Antworten.
- WCAG 2.1, 1.4.11 Non-text Contrast (3 zu 1 für Bedienoberflächenkomponenten) und 1.4.3 Contrast (Minimum).
- Verhältnisse auf Weiß, berechnet mit der WCAG-Formel für relative Luminanz: #E5E5E5 1,26 zu 1, #79747E 4,55 zu 1, Platzhalter-Grau #8E8E93 3,26 zu 1. #79747E ist die Outline-Farbe von Material 3 (NeutralVariant50), ausgelesen aus androidx Compose ColorLightTokens.
- MDN, the input element, type attribute:
type="email"öffnet auf Handys eine E-Mail-Tastatur. - Die Feldgrößen in der Spezifikationstabelle (15 px Label, 48 px Höhe, 12 px Radius, 13 px Hinweis) sind unsere eigene Empfehlung, kein Plattformwert.
- Zuerst als Karussell veröffentlicht auf UX Brainy.
Want every form in your product to feel this easy to fill in? Our team designs and builds product UI with the field details decided once.
Get Started
