Retour

Mot de passe (password)

La demande de mot de passe permet d’aider un utilisateur à créer ou saisir un mot de passe.

Documentation

Mot de passe

Votre mot de passe doit contenir :

12 caractères minimum

1 caractère spécial minimum

1 chiffre minimum

<div class="fr-password" id="password-6278">
    <label class="fr-label" for="password-6278-input">
        Mot de passe
    </label>
    <div class="fr-input-wrap">
        <input class="fr-password__input fr-input" autocapitalize="off" autocorrect="off" aria-describedby="password-6278-input-messages" aria-required="true" name="password" autocomplete="new-password" id="password-6278-input" type="password">
    </div>
    <div class="fr-messages-group" id="password-6278-input-messages" aria-live="polite">
        <p class="fr-message" id="password-6278-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-6278-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-6278-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-6278-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-6278-show" type="checkbox">
        <label class="fr--password__checkbox fr-label" for="password-6278-show">
            Afficher
        </label>
    </div>
</div>

Mot de passe avec description

Votre mot de passe doit contenir :

12 caractères minimum

1 caractère spécial minimum

1 chiffre minimum

<div class="fr-password" id="password-6281">
    <label class="fr-label" for="password-6281-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-6281-input-messages" aria-required="true" name="password" autocomplete="new-password" id="password-6281-input" type="password">
    </div>
    <div class="fr-messages-group" id="password-6281-input-messages" aria-live="polite">
        <p class="fr-message" id="password-6281-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-6281-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-6281-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-6281-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-6281-show" type="checkbox">
        <label class="fr--password__checkbox fr-label" for="password-6281-show">
            Afficher
        </label>
    </div>
</div>

Mot de passe après validation

Votre mot de passe doit contenir :

12 caractères minimum

1 caractère spécial minimum

1 chiffre minimum

<div class="fr-password" id="password-6284">
    <label class="fr-label" for="password-6284-input">
        Mot de passe
    </label>
    <div class="fr-input-wrap">
        <input class="fr-password__input fr-input" autocapitalize="off" autocorrect="off" aria-describedby="password-6284-input-messages" aria-required="true" name="password" value="x8A@" autocomplete="new-password" id="password-6284-input" type="password">
    </div>
    <div class="fr-messages-group" id="password-6284-input-messages" aria-live="polite">
        <p class="fr-message" id="password-6284-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-6284-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-6284-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-6284-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-6284-show" type="checkbox">
        <label class="fr--password__checkbox fr-label" for="password-6284-show">
            Afficher
        </label>
    </div>
</div>

Mot de passe de connexion

Mot de passe oublié ?

<div class="fr-password" id="password-6287">
    <label class="fr-label" for="password-6287-input">
        Mot de passe
    </label>
    <div class="fr-input-wrap">
        <input class="fr-password__input fr-input" autocapitalize="off" autocorrect="off" aria-describedby="password-6287-input-messages" aria-required="true" name="password" autocomplete="current-password" id="password-6287-input" type="password">
    </div>
    <div class="fr-messages-group" id="password-6287-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-6287-show" type="checkbox">
        <label class="fr--password__checkbox fr-label" for="password-6287-show">
            Afficher
        </label>
    </div>
    <p>
        <a href="" class="fr-link">Mot de passe oublié ?</a>
    </p>
</div>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.