Tipps für bessere Formulare (3)

Moin!

Heute geht es mit der Mini-Serie Tipps für bessere Formulare weiter.

Lass uns über Placeholder sprechen und warum sie ein Label nicht ersetzen können. Nachdem sie von allen Browsern unterstützt wurden, wurde es zum Trend, Placeholder anstatt eines Labels zu verwenden.

Und auch ich habe bestimmt mehr als ein Projekt mit Placeholdern statt Labeln in den letzten 10-15 Jahren umgesetzt. Denn Label brauchen mehr Platz, sie können das Formular „klobiger“ aussehen lassen. Auf der anderen Seite sind Label aber deutlich benutzerfreundlicher.

Wenn du regelmäßig Formulare per Autovervollständigung ausfüllen lässt, dann weißt du genau, was ich meine: Ich prüfe dann lieber 2 Mal, ob die automatisch gemachten Eingaben auch zum Feld passen (während ich mit Label direkt sehen könnte, wo die Zuordnung falsch ist).

Denn ich möchte nicht (wieder) der Depp sein, der bei „Telefonnummer“ seine Hausnummer eingetragen hat 😳

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

Hier ein sehr einfaches SCSS-Beispiel, wie das aussehen kann:

.widget-text {
  label {
 [nbsp] [nbsp]opacity: 0;
  }

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

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

Was hälst du von solchen Lösungen? Nutzt du bereits eine Placeholder-Label-Kombination?
Oder bist du Team „Label Forever“?

Erstma'
Dennis

PS: Falls du es letzte Woche verpasst hast, hier die Show-Notes zu „Eigene Elemente in Contao“

PPS: Ende 2023 schrieb ich bereits darüber, dass die Pseudo-Klasse :has() mein Entwickler-Herz höher schlagen lässt.