Formulaires & Inputs Animes
Formulaires animés et inputs interactifs pour améliorer l'UX.
Mis à jour le
Comment animer des champs de formulaire sans nuire à l'accessibilité ?
Les formulaires animés guident pendant la saisie : libellés qui flottent au-dessus du champ, soulignements qui grandissent au focus, champs qui tremblent en cas d'erreur, boutons qui montrent l'envoi puis la réussite. Ils reposent sur des transitions CSS et des sélecteurs comme :focus-visible, :placeholder-shown et :user-invalid, avec du JavaScript seulement pour les états plus riches.
Comment choisir, performances et accessibilité
- Floating Label fait gagner de la place sur les formulaires d'inscription et de contact, Password Strength et Shake Validation donnent un retour immédiat, et Submit Button States rassure pendant les envois lents.
- Gardez toujours un vrai élément
label, annoncez les erreurs par un texte plutôt que par le seul mouvement ou la seule couleur, et vérifiez qu'aucune animation ne masque ce que l'utilisateur a tapé. - Floating Label et Underline Focus sont gratuits avec leur code complet ; les autres effets de formulaire sont inclus dans Premium.
Floating Label
Le label flotte vers le haut lorsque l'input est focus ou rempli.
Voir le code source
<div class="demo-preview">
<div class="floating-label-group">
<input type="text" id="floating-input" placeholder=" " />
<label for="floating-input">Votre email</label>
</div>
</div>.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
box-sizing: border-box
}
.demo-preview {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
background: rgb(26, 26, 36);
color: rgb(255, 255, 255);
font-family: sans-serif;
}
/* Variables du design system du site, dont ce code dépend (valeurs de css/style.css — à adapter librement). */
.demo-preview {
--bg-elevated: #1a1a24;
--text-muted: #8b8b93;
}
.floating-label-group {
position: relative;
width: 280px;
}
.floating-label-group input {
width: 100%;
padding: 16px 12px 8px;
font-size: 1rem;
font-family: inherit;
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: white;
outline: none;
transition: all 0.3s ease;
}
.floating-label-group label {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
pointer-events: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: transparent;
padding: 0 4px;
}
.floating-label-group input:focus,
.floating-label-group input:not(:placeholder-shown) {
border-color: #6366f1;
background: rgba(99, 102, 241, 0.05);
}
.floating-label-group input:focus+label,
.floating-label-group input:not(:placeholder-shown)+label {
top: 0;
font-size: 0.75rem;
color: #6366f1;
background: var(--bg-elevated);
}/* CSS pur — aucun JavaScript requis */Underline Focus
Ligne animée qui s'étend depuis le centre au focus.
Voir le code source
<div class="demo-preview">
<div class="underline-input-group">
<input type="text" id="underline-input" placeholder=" " />
<label for="underline-input">Nom complet</label>
<span class="underline"></span>
</div>
</div>.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
box-sizing: border-box
}
.demo-preview {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
background: rgb(26, 26, 36);
color: rgb(255, 255, 255);
font-family: sans-serif;
}
/* Variables du design system du site, dont ce code dépend (valeurs de css/style.css — à adapter librement). */
.demo-preview {
--text-muted: #8b8b93;
}
.underline-input-group {
position: relative;
width: 280px;
}
.underline-input-group input {
width: 100%;
padding: 12px 0;
font-size: 1rem;
font-family: inherit;
background: transparent;
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
color: white;
outline: none;
}
.underline-input-group .underline {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, #6366f1, #d946ef);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.underline-input-group input:focus~.underline {
left: 0;
width: 100%;
}
.underline-input-group label {
position: absolute;
left: 0;
top: 12px;
color: var(--text-muted);
pointer-events: none;
transition: all 0.3s ease;
}
.underline-input-group input:focus+label,
.underline-input-group input:not(:placeholder-shown)+label {
top: -16px;
font-size: 0.75rem;
color: #6366f1;
}/* CSS pur — aucun JavaScript requis */Border Animation
Bordure qui se dessine progressivement autour de l'input.
Shake Validation
L'input tremble pour indiquer une erreur de validation.
Success Checkmark
Coche animée qui apparait quand l'input est valide.
Password Strength
Indicateur animé de la force du mot de passe.
Search Expand
Champ de recherche qui s'étend au clic.
Input with Icon
Icône qui s'anime au focus de l'input.
Textarea Auto-grow
Zone de texte qui s'agrandit automatiquement.
Submit Button States
Bouton avec états loading, success et error animés.
Floating Label V2
Label qui flotte élégamment au-dessus de l'input avec fond coloré.
Underline Animation
Ligne qui s'étend depuis le centre lors du focus.
Glow Input
Input avec effet de lueur au focus.
Checkbox Animated
Checkbox avec coche animée qui apparait progressivement.
Toggle iOS Style
Toggle switch avec animation élastique style iOS.
Radio Ripple
Boutons radio avec effet ripple lors de la sélection.
Password Strength V2
Indicateur de force compact avec barre colorée.
Select Animated
Menu déroulant avec flèche animée au focus.
Character Counter
Textarea avec compteur de caractères intégré.
Search Expand V2
Champ de recherche compact qui s'étend au focus.
Pricing Toggle Odometer
Bascule mensuel/annuel dont le prix défile chiffre par chiffre (effet compteur) avec badge d'économie animé. Idéal pour pousser l'abonnement annuel.
💡 Idéal pour : page pricing, SaaS, comparateur d'offres, upsell annuel, Black Friday.