DSFR v1.12.0
La demande de mot de passe permet d’aider un utilisateur à créer ou saisir un mot de passe.
Documentation<div class="fr-password" id="password-6512">
<label class="fr-label" for="password-6512-input">
Mot de passe
</label>
<div class="fr-input-wrap">
<input class="fr-password__input fr-input" autocapitalize="off" autocorrect="off" aria-describedby="password-6512-input-messages" aria-required="true" name="password" autocomplete="new-password" id="password-6512-input" type="password">
</div>
<div class="fr-messages-group" id="password-6512-input-messages" aria-live="polite">
<p class="fr-message" id="password-6512-input-message">Votre mot de passe doit contenir :</p>
<p class="fr-message fr-message--info" data-fr-valid="validé" data-fr-error="en erreur" id="password-6512-input-message-info">12 caractères minimum</p>
<p class="fr-message fr-message--info" data-fr-valid="validé" data-fr-error="en erreur" id="password-6512-input-message-info-1">1 caractère spécial minimum</p>
<p class="fr-message fr-message--info" data-fr-valid="validé" data-fr-error="en erreur" id="password-6512-input-message-info-2">1 chiffre minimum</p>
</div>
<div class="fr-password__checkbox fr-checkbox-group fr-checkbox-group--sm">
<input aria-label="Afficher le mot de passe" id="password-6512-show" type="checkbox">
<label class="fr--password__checkbox fr-label" for="password-6512-show">
Afficher
</label>
</div>
</div>
<div class="fr-password" id="password-6515">
<label class="fr-label" for="password-6515-input">
Mot de passe
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-input-wrap">
<input class="fr-password__input fr-input" autocapitalize="off" autocorrect="off" aria-describedby="password-6515-input-messages" aria-required="true" name="password" autocomplete="new-password" id="password-6515-input" type="password">
</div>
<div class="fr-messages-group" id="password-6515-input-messages" aria-live="polite">
<p class="fr-message" id="password-6515-input-message">Votre mot de passe doit contenir :</p>
<p class="fr-message fr-message--info" data-fr-valid="validé" data-fr-error="en erreur" id="password-6515-input-message-info">12 caractères minimum</p>
<p class="fr-message fr-message--info" data-fr-valid="validé" data-fr-error="en erreur" id="password-6515-input-message-info-1">1 caractère spécial minimum</p>
<p class="fr-message fr-message--info" data-fr-valid="validé" data-fr-error="en erreur" id="password-6515-input-message-info-2">1 chiffre minimum</p>
</div>
<div class="fr-password__checkbox fr-checkbox-group fr-checkbox-group--sm">
<input aria-label="Afficher le mot de passe" id="password-6515-show" type="checkbox">
<label class="fr--password__checkbox fr-label" for="password-6515-show">
Afficher
</label>
</div>
</div>
<div class="fr-password" id="password-6518">
<label class="fr-label" for="password-6518-input">
Mot de passe
</label>
<div class="fr-input-wrap">
<input class="fr-password__input fr-input" autocapitalize="off" autocorrect="off" aria-describedby="password-6518-input-messages" aria-required="true" name="password" value="x8A@" autocomplete="new-password" id="password-6518-input" type="password">
</div>
<div class="fr-messages-group" id="password-6518-input-messages" aria-live="polite">
<p class="fr-message" id="password-6518-input-message">Votre mot de passe doit contenir :</p>
<p class="fr-message fr-message--error" data-fr-valid="validé" data-fr-error="en erreur" id="password-6518-input-message-error">12 caractères minimum</p>
<p class="fr-message fr-message--valid" data-fr-valid="validé" data-fr-error="en erreur" id="password-6518-input-message-valid">1 caractère spécial minimum</p>
<p class="fr-message fr-message--valid" data-fr-valid="validé" data-fr-error="en erreur" id="password-6518-input-message-valid-1">1 chiffre minimum</p>
</div>
<div class="fr-password__checkbox fr-checkbox-group fr-checkbox-group--sm">
<input aria-label="Afficher le mot de passe" id="password-6518-show" type="checkbox">
<label class="fr--password__checkbox fr-label" for="password-6518-show">
Afficher
</label>
</div>
</div>
<div class="fr-password" id="password-6521">
<label class="fr-label" for="password-6521-input">
Mot de passe
</label>
<div class="fr-input-wrap">
<input class="fr-password__input fr-input" autocapitalize="off" autocorrect="off" aria-describedby="password-6521-input-messages" aria-required="true" name="password" autocomplete="current-password" id="password-6521-input" type="password">
</div>
<div class="fr-messages-group" id="password-6521-input-messages" aria-live="polite">
</div>
<div class="fr-password__checkbox fr-checkbox-group fr-checkbox-group--sm">
<input aria-label="Afficher le mot de passe" id="password-6521-show" type="checkbox">
<label class="fr--password__checkbox fr-label" for="password-6521-show">
Afficher
</label>
</div>
<p>
<a href="" class="fr-link">Mot de passe oublié ?</a>
</p>
</div>