Floating Label
Auch genannt Float label, Animated placeholder
Das Platzhalter-Label wandert nach oben und wird kleiner, sobald das Feld fokussiert oder ausgefüllt ist.
Einsatz
Formulare, Login-Felder
Varianten
- focus float
- not(:placeholder-shown)
Prompt
Ersetze [wo] durch die Stelle auf deiner Seite und füge den Prompt in deinen KI-Agenten ein. Jeder Prompt enthält den Namen der Animation – beim nächsten Mal reicht es, sie beim Namen zu nennen.
Füge bei [wo] ein „Floating Label“ hinzu (auch float label oder animated placeholder genannt).
Wenn das Feld fokussiert ist oder einen Wert hat, soll das Label, das darin sitzt, weich und schnell nach oben an die Oberkante des Felds gleiten und kleiner werden, und nur dann zurückwandern, wenn das Feld leer und nicht fokussiert ist.
Lass es ein echtes Label bleiben, das mit dem Input verknüpft ist, und sorge dafür, dass sich die Feldhöhe nicht ändert, damit das Formular nie springt.