Platzhalter im Textfeld: vom onFocus-Trick zu placeholder

Ein Textfeld zeigt einen Hinweis wie „Ihr Name“ an, und beim Hineinklicken verschwindet er. Diese Kleinigkeit hat eine eigene Geschichte: Sie war jahrelang ein JavaScript-Notbehelf, wurde dann zu einem HTML-Attribut – und ist heute in vielen Fällen der falsche Weg.

Die Lösung von damals

Die ursprüngliche Fassung dieses Beitrags aus dem Jahr 2007 beschrieb den Standardweg: Der Hinweistext steht als tatsächlicher Wert im Feld, und ein Ereignishandler löscht ihn beim Hineinklicken.

<input name="name" type="text" value="Ihr Name"
       onFocus="if(this.value=='Ihr Name') this.value=''" />

Für ein mehrzeiliges Feld dasselbe, nur steht der Vorgabewert dort zwischen den Tags:

<textarea name="message"
          onFocus="if(this.value=='Ihre Mitteilung') this.value=''">Ihre Mitteilung</textarea>

Die Abfrage if(this.value=='Ihr Name') war dabei kein Zierrat, sondern notwendig: Ohne sie hätte ein zweiter Klick ins Feld die bereits eingetippte Eingabe gelöscht.

Die Probleme, die dabei blieben

Auch mit dieser Absicherung hatte der Ansatz vier Schwächen – und alle vier waren der Grund, warum HTML später eine eigene Lösung bekam:

• Der Hinweistext wurde mit abgeschickt. Wer das Feld nie anklickte, sendete „Ihr Name“ als Namen. Serverseitig musste man deshalb gegen genau diese Zeichenfolge prüfen.
• Beim Verlassen kam er nicht zurück. Wer hineinklickte und ohne Eingabe wieder heraus, hatte ein leeres Feld ohne Beschriftung.
• Hinweis und Eingabe waren nicht unterscheidbar. Beide standen in derselben Farbe – auf den ersten Blick sah ein leeres Feld aus wie ein ausgefülltes.
• Ohne JavaScript blieb der Text stehen und musste von Hand gelöscht werden.

Wie es heute geht

HTML5 hat dafür ein eigenes Attribut bekommen. Es löst alle vier Punkte auf einmal:

<input type="text" name="name" placeholder="Ihr Name">
<textarea name="message" placeholder="Ihre Mitteilung"></textarea>

Der Platzhalter ist kein Wert: Er wird nicht mitgeschickt, erscheint beim Verlassen wieder, wird vom Browser grau dargestellt und funktioniert ohne JavaScript.

Der eigentliche Punkt: Ein Platzhalter ist keine Beschriftung

Damit ist die Technik gelöst – die Gestaltungsfrage aber erst aufgeworfen. Denn beide Varianten, die alte wie die neue, teilen dasselbe Grundproblem: Sobald jemand tippt, ist die Beschriftung weg.

Was daraus folgt:

• Beim Prüfen fehlt der Zusammenhang. Wer ein längeres Formular vor dem Absenden durchgeht, sieht ausgefüllte Felder ohne Angabe, was darin stehen sollte.
• Screenreader behandeln Platzhalter uneinheitlich. Manche lesen sie vor, manche nicht. Als alleinige Beschriftung sind sie deshalb unbrauchbar.
• Der Kontrast ist meist zu gering. Die graue Standarddarstellung liegt oft unter dem Mindestwert von 4,5:1.
• Der Platzhalter wird für eine Eingabe gehalten. Ein Feld mit grauem Text sieht für manche Nutzer bereits ausgefüllt aus.

Deshalb lautet die heutige Regel: immer eine sichtbare Beschriftung, der Platzhalter höchstens ergänzend für ein Format-Beispiel.

<label for="tel">Telefonnummer</label>
<input type="tel" id="tel" name="tel" placeholder="030 12345678">

Die Beschriftung sagt, was hineingehört. Der Platzhalter zeigt, in welcher Form. Er verschwindet beim Tippen – die Beschriftung bleibt.

Wenn der Platz für eine Beschriftung fehlt

Das übliche Argument für den Platzhalter als Ersatz ist Platzmangel. Dafür gibt es zwei saubere Lösungen.

Die Beschriftung wandert nach oben, sobald etwas eingegeben wird. Das lässt sich heute ohne JavaScript umsetzen – :placeholder-shown trifft ein Feld genau dann, wenn der Platzhalter noch zu sehen ist:

.feld { position: relative; }

.feld label {
  position: absolute;
  left: 12px;
  top: 4px;
  font-size: 0.75rem;
  color: #0090c8;
  transition: all 0.15s;
}

/* solange nichts eingegeben ist: Beschriftung sitzt im Feld */
.feld input:placeholder-shown + label {
  top: 14px;
  font-size: 1rem;
  color: #767676;
}

.feld input {
  padding: 20px 12px 6px;
  width: 100%;
}

Oder die Beschriftung bleibt nur für Screenreader vorhanden. Das ist die schlechtere, aber vertretbare Variante – sie hilft der Vorlesesoftware, dem sehenden Nutzer aber nicht:

.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

Den Platzhalter lesbar machen

Wo er eingesetzt wird, sollte er den Kontrastwert erreichen – die Voreinstellung tut das oft nicht:

input::placeholder,
textarea::placeholder {
  color: #767676;   /* 4,54:1 auf Weiss */
  opacity: 1;       /* Firefox setzt sonst zusaetzlich die Deckkraft herab */
}

Die Zeile opacity: 1 ist ein Detail, das leicht übersehen wird: Ohne sie wird die sorgfältig gewählte Farbe in manchen Browsern zusätzlich aufgehellt und unterschreitet den Wert doch wieder.

Was heute außerdem dazugehört

Zwei Attribute, die es 2007 nicht gab und die für die Bedienung auf dem Telefon mehr ausmachen als jeder Platzhalter:

<input type="email"  name="mail" autocomplete="email">
<input type="tel"    name="tel"  autocomplete="tel">
<input type="text"   name="plz"  autocomplete="postal-code" inputmode="numeric">

type und inputmode bestimmen, welche Tastatur auf dem Telefon erscheint – bei einer Postleitzahl also die Zifferntastatur. autocomplete erlaubt dem Browser, gespeicherte Angaben einzusetzen. Das spart deutlich mehr Zeit als ein Hinweistext im Feld.

Fazit

Der Beitrag von 2007 beschrieb einen sauber gebauten Notbehelf – inklusive der Abfrage, die das versehentliche Löschen verhinderte. Das Attribut placeholder hat diesen Notbehelf überflüssig gemacht.

Es hat aber nur das technische Problem gelöst, nicht das gestalterische: Ein Hinweis, der beim Tippen verschwindet, bleibt ein Hinweis, der beim Tippen verschwindet. Deshalb ist die heutige Empfehlung nicht „nimm placeholder statt onFocus“, sondern: sichtbare Beschriftung, Platzhalter nur als Ergänzung.

Bei Formularen, Barrierefreiheit und sauberer Umsetzung helfen wir als Agentur für Programmierung gerne weiter.