Placeholder ersetzen keine Label

Nachdem Placeholder von allen Browsern unterstützt wurden, wurde es zum Trend, sie anstatt eines Labels zu verwenden. Verständlich: Label brauchen mehr Platz und können ein Formular „klobiger“ aussehen lassen. Auf der anderen Seite sind Label deutlich benutzerfreundlicher.

Das Autovervollständigungs-Problem

Wenn du regelmäßig Formulare per Autovervollständigung ausfüllen lässt, kennst du das Problem: Ohne sichtbare Label musst du zweimal prüfen, ob die automatisch gemachten Eingaben zum jeweiligen Feld passen. Mit Label siehst du direkt, wo die Zuordnung falsch ist — und trägst nicht versehentlich bei „Telefonnummer“ die Hausnummer ein.

Die Kombination: Label erscheint bei Eingabe

Es gibt aber auch eine Kombination aus Label und Placeholder: Das Label wird erst angezeigt, sobald eine Eingabe im Textfeld gemacht wurde. Früher brauchte man dafür ein paar Zeilen Javascript, mittlerweile geht das allein mit CSS — mit einer Kombination aus :has(), :not() und :placeholder-shown.

Ein sehr einfaches SCSS-Beispiel:

.widget-text {
  label {
    opacity: 0;
  }

  &:has(input:not(:placeholder-shown)) {
    label {
      opacity: 1;
    }
  }
}

Das Ganze lässt sich auch animieren und die Schriftgröße entsprechend anpassen, sodass Besucher:innen den Wechsel von Placeholder zu Label gar nicht mehr bemerken.

Verwandte Tipps

:has() hilft auch an anderer Stelle im Formular weiter — zum Beispiel bei der CSS-Validierung mit :user-valid und :user-invalid.