Mot de passe à révéler
Un bouton en forme d’œil affiche le mot de passe et un trait barre l’icône pour montrer qu’il est visible.
Réglages
Code
<label class="uv-in2p"><input type="password" placeholder="Mot de passe" value="secreto123"><button class="ey"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><path d="M2 12s3.8-6 10-6 10 6 10 6-3.8 6-10 6-10-6-10-6z"/><circle cx="12" cy="12" r="2.8"/><path class="sl" d="M4 20L20 4"/></svg></button></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
Voir ce que l’on tape évite bien des connexions ratées, surtout sur mobile. Utilisez-le sur la page de connexion d’une application, à la création d’un compte ou à l’étape Wi-Fi de l’installation d’un objet connecté. Le trait sur l’œil rend l’état évident. Un champ mot de passe avec bouton afficher et masquer, en HTML, CSS et un peu de JavaScript.
Donnez au bouton un nom accessible comme « Afficher le mot de passe » pour les lecteurs d’écran. À l’inscription, ajoutez une courte indication sur les règles plutôt qu’une erreur après l’envoi.