HTML + CSSChamps

Libellé flottant coloré

Le libellé est placé dans le champ et remonte en haut, plus petit et coloré, dès que vous tapez.

Réglages

16px
1x

Code

<label class="uv-if"><input placeholder=" "><span>E-mail</span></label>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Champs

Où l’utiliser

Un champ à label flottant garde un formulaire compact sans perdre le libellé pendant la saisie, ce qui arrive avec un simple placeholder. Il convient à un écran de connexion, à l'étape adresse de livraison d'une boutique ou au formulaire de contact d'un cabinet dentaire. Au clic, le libellé remonte, rétrécit et prend votre couleur principale.

C'est sur mobile qu'il est le plus utile, là où la hauteur manque. Gardez des libellés d'un ou deux mots, car ils sont réduits aux trois quarts. Pour une question longue, un libellé classique au-dessus du champ se lit mieux.