Escribe una contraseña
- 8 caracteres o más
- Una mayúscula
- Un número
- Un símbolo
Passwort mit Stärkeanzeige
Ein vierteiliger Balken und eine Liste von Anforderungen, die beim Tippen nacheinander abgehakt werden.
Einstellungen
Code
<div class="uv-ipw"><label for="uv-ipw-in">Passwort</label><div class="fd"><input id="uv-ipw-in" type="password" autocomplete="new-password" placeholder="Mindestens 8 Zeichen"></div><div class="mt" aria-hidden="true"><i></i><i></i><i></i><i></i></div><p class="lv" aria-live="polite">Gib ein Passwort ein</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>Mindestens 8 Zeichen</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>Ein Großbuchstabe</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>Eine Zahl</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>Ein Sonderzeichen</span></li></ul></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Eingabefelder
Alle ansehen: EingabefelderWofür du ihn nutzen kannst
Registrierungsformulare konvertieren besser, wenn man vor dem Absenden weiß, wie ein gutes Passwort aussieht. Dieses Feld zeigt eine vierteilige Anzeige, die sich füllt und von Rot über Bernstein zu Grün wechselt, ein Wort für die Stärke und vier Anforderungen, die zu Haken werden: Länge, Großbuchstabe, Zahl und Sonderzeichen.
Die Stärkeanzeige ist eine aria-live-Region, Screenreader hören die Änderung also. Passe die Regeln im Skript an dein Backend an und nutze die zwei Farben für stark und schwach.