Ajouter

Lorem ipsum

Lorem ipsum

CRO / Conversion

3 min

Comment afficher/masquer le mot de passe dans un input Webflow ?

Apprenez à ajouter un bouton afficher/masquer le mot de passe sur un champ Webflow avec JavaScript.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter un bouton afficher/masquer sur un champ mot de passe dans Webflow.

Exemple

ÉlémentClasseRôle
Input passwordpassword-inputChamp de saisie (type=password)
Bouton togglepassword-toggleBouton œil à côté du champ
Icône visibleicon-showSVG ou texte 'Afficher'
Icône masquéicon-hideSVG ou texte 'Masquer'

1. Créez la structure dans Webflow

Créez un Div contenant un Input de type Password (classe password-input) et un bouton (classe password-toggle) côte à côte. Positionnez le bouton en absolute à droite de l'input si nécessaire.

2. Le script

document.querySelectorAll('.password-toggle').forEach(function(toggle) {
var input = toggle.closest('div').querySelector('.password-input');
if (!input) return;
var show = toggle.querySelector('.icon-show');
var hide = toggle.querySelector('.icon-hide');
if (hide) hide.style.display = 'none';

toggle.addEventListener('click', function() {
var isPassword = input.type === 'password';
input.type = isPassword ? 'text' : 'password';
if (show) show.style.display = isPassword ? 'none' : 'block';
if (hide) hide.style.display = isPassword ? 'block' : 'none';
});
});

Variante simplifiée (texte seulement)

Si vous voulez juste un lien texte "Afficher / Masquer" sans icônes :

document.querySelectorAll('.password-toggle').forEach(function(toggle) {
var input = toggle.closest('div').querySelector('.password-input');
toggle.addEventListener('click', function() {
var isPass = input.type === 'password';
input.type = isPass ? 'text' : 'password';
toggle.textContent = isPass ? 'Masquer' : 'Afficher';
});
});

bon à savoir

Ajoutez aria-label='Afficher le mot de passe' sur votre bouton toggle pour l'accessibilité. Mettez à jour l'aria-label dynamiquement dans le script selon l'état (Afficher/Masquer). Les lecteurs d'écran annonceront l'action disponible, rendant le formulaire accessible aux utilisateurs non-voyants.

Conclusion

Le password toggle améliore l'UX sur tous les formulaires avec mot de passe. Essentiel sur mobile où la saisie est plus sujette aux erreurs.

Publié le

Ces tutoriels pourraient vous intéresser

tutoriels similaires

Design

5 min lecture

5 vues

Animations au scroll sans GSAP : la technique CSS + JS minimaliste

Mis à jour le 10.09.2026 par Bryan DELAITRE

SEO / GEO

5 min lecture

5 vues

Comment faire une redirection dans Webflow en 2026 ?

Mis à jour le 19.12.2025 par Sandro DA SILVA

SEO / GEO

5 min lecture

5 vues

Ajouter des données structurées à votre site Webflow ?

Mis à jour le 21.08.2025 par Sandro DA SILVA

Let’s f*****G GO !!

Prêt à faire décoller
votre activité  ?

Alexandre

Max

Enora

Bryan

Cannelle

Tiphaine

Vous allez notre collaboration...