Mot de passe avec œil
Un champ de mot de passe avec un bouton en forme d'œil ; le trait qui barre l'œil s'efface à l'affichage.
Réglages
Code
<label class="uv-ip"><input type="password" value="secret123"><button type="button" aria-label="Afficher le mot de passe"><svg viewBox="0 0 24 24"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/><path class="sl" d="M4 4l16 16" pathLength="1"/></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 qu'on a tapé évite bien des connexions ratées, surtout sur mobile. Ce bouton pour afficher le mot de passe convient à tout formulaire de connexion ou d'inscription, au réglage Wi-Fi d'un objet connecté ou à l'espace client d'une boutique. Touchez l'œil : le trait s'efface et les points deviennent du texte, grâce à quelques lignes de JavaScript.
Commencez par les formulaires d'inscription, là où une faute de frappe dans un nouveau mot de passe pose le plus de problèmes. Le bouton porte aussi un libellé caché pour les lecteurs d’écran : même sans voir l’œil, on sait à quoi il sert.