Comment créer des labels flottants sur les inputs Webflow ?
Apprenez à créer des labels flottants (floating labels) sur les inputs Webflow avec CSS transitions et JavaScript.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer des labels flottants (floating labels) sur les inputs Webflow : le label se lève au-dessus du champ quand l'utilisateur commence à taper.
Exemple
| Classe | Élément | État |
|---|---|---|
| form-field | Div wrapper (label + input) | Conteneur relatif |
| form-label | Label | Position absolue, se déplace au focus |
| is-filled | form-field | Ajoutée quand l'input a une valeur |
1. Structure HTML dans un Embed
Créez la structure suivante dans un Embed Webflow. Le label et l'input doivent être dans le même conteneur relatif.
<div class="form-field">
<label class="form-label">Email</label>
<input type="email" class="form-input">
</div>2. Le CSS
.form-field { position: relative; padding-top: 16px; }
.form-label {
position: absolute;
top: 28px;
left: 12px;
font-size: 16px;
color: #9ca3af;
transition: all 0.2s ease;
pointer-events: none;
}
.form-field.is-filled .form-label,
.form-field:focus-within .form-label {
top: 2px;
font-size: 11px;
color: #6b7280;
}3. Le script
document.querySelectorAll('.form-field').forEach(function(field) {
var input = field.querySelector('input, textarea');
if (!input) return;
function toggle() {
field.classList.toggle('is-filled', input.value.length > 0);
}
input.addEventListener('input', toggle);
input.addEventListener('blur', toggle);
toggle();
});Conclusion
Les floating labels améliorent l'UX des formulaires denses. Voir aussi : concevoir des formulaires sans friction.
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
