HTML + CSSEingabefelder
Label, das in die Ecke rutscht
Das Label steht im Feld und rutscht nach oben in die Ecke, sobald du zu tippen beginnst.
Einstellungen
16px
1x
Code
<label class="uv-in2f"><input placeholder=" "><span>E-Mail</span></label>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Eingabefelder
Wofür du ihn nutzen kannst
Schwebende Labels sparen Platz in Formularen, bei denen jeder Pixel zählt: das E-Mail-Feld eines Logins, der Adressschritt im mobilen Checkout oder ein kurzes Kontaktformular. Das Label verschwindet nie, es macht nur Platz. Ein Floating-Label-Input in HTML und CSS mit weichem Fokusring.
Halte die Labels kurz, ein oder zwei Wörter, denn beim Hochrutschen werden sie kleiner. Längere Hinweise wie die Regeln für ein Passwort gehören in eine eigene Hilfezeile unter dem Feld, nicht ins Label.