Escribe una contraseña
- 8 caracteres o más
- Una mayúscula
- Un número
- Un símbolo
Mot de passe avec jauge de sécurité
Une barre en quatre segments et une liste de critères qui se cochent un à un pendant la saisie.
Réglages
Code
<div class="uv-ipw"><label for="uv-ipw-in">Mot de passe</label><div class="fd"><input id="uv-ipw-in" type="password" autocomplete="new-password" placeholder="Au moins 8 caractères"></div><div class="mt" aria-hidden="true"><i></i><i></i><i></i><i></i></div><p class="lv" aria-live="polite">Saisis un mot de passe</p><ul><li data-r="len"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span>8 caractères ou plus</span></li><li data-r="up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span>Une majuscule</span></li><li data-r="num"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span>Un chiffre</span></li><li data-r="sym"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span>Un symbole</span></li></ul></div>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
Voir tout : ChampsOù l’utiliser
Les formulaires d'inscription convertissent mieux quand on sait à quoi ressemble un bon mot de passe avant d'envoyer. Ce champ affiche une jauge en quatre segments qui se remplit et passe du rouge à l'ambre puis au vert, un mot qui décrit la solidité et quatre critères qui deviennent des coches : longueur, majuscule, chiffre et symbole.
Le libellé de solidité est une région aria-live, les lecteurs d'écran entendent donc le changement. Adapte les règles du script à ton backend et utilise les deux couleurs pour les états fort et faible.