Micro-interaction

Floating Label (label flottant)

Aussi appelée Float label, Animated placeholder

Le libellé du placeholder remonte et rétrécit au-dessus du champ quand il a le focus ou est rempli.

Formulaires, champs de connexion

  • focus float
  • not(:placeholder-shown)

Voir le code de la démo

Prompt

Remplacez [où] par la partie de votre page, puis collez le prompt dans votre agent IA. Chaque prompt contient le nom de l’animation : la prochaine fois, il vous suffira de la demander par son nom.

Ajoute un label flottant (Floating Label) sur [où], aussi appelé float label ou animated placeholder.
Quand le champ a le focus ou contient une valeur, le libellé placé à l’intérieur doit glisser vers le haut et rétrécir jusqu’au bord supérieur du champ, de façon fluide et rapide, et ne redescendre que quand le champ est vide et sans focus.
Garde un vrai label associé à l’input, et fais en sorte que la hauteur du champ ne change pas pour que le formulaire ne bouge jamais.

Remplacez [où] par la partie de votre page, puis collez le prompt dans votre agent IA. Chaque prompt contient le nom de l’animation : la prochaine fois, il vous suffira de la demander par son nom.