DSFR v1.15.0

Retour

Bloc fonctionnel de demande d'email (email)

La demande d'email est un bloc fonctionnel qui permet de saisir un email.

Documentation

Demande d'une adresse électronique

<div class="fr-input-group" id="input-group-7783">
    <label class="fr-label" for="email-7782">
        Adresse électronique
        <span class="fr-hint-text">Format attendu : nom@example.com</span>
    </label>
    <input class="fr-input" spellcheck="false" autocomplete="email" aria-describedby="email-7782-messages" id="email-7782" type="email">
    <div class="fr-messages-group" id="email-7782-messages" aria-live="polite">
    </div>
</div>

Demande d'une adresse électronique - Erreur

Le format de l’adresse electronique saisie n’est pas valide. Le format attendu est : nom@example.com

<div class="fr-input-group fr-input-group--error" id="input-group-7788">
    <label class="fr-label" for="email-7787">
        Adresse électronique
        <span class="fr-hint-text">Format attendu : nom@example.com</span>
    </label>
    <input class="fr-input" spellcheck="false" autocomplete="email" aria-describedby="email-7787-messages" id="email-7787" type="email">
    <div class="fr-messages-group" id="email-7787-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="email-7787-message-error">Le format de l’adresse electronique saisie n’est pas valide. Le format attendu est : nom@example.com</p>
    </div>
</div>

Demande et indication de traitement d’une adresse électronique

<div class="fr-input-group" id="input-group-7793">
    <label class="fr-label" for="email-7792">
        Adresse électronique
        <span class="fr-hint-text">Indication : cette adresse est utilisée uniquement pour la connexion au service.</span>
        <span class="fr-hint-text">Format attendu : nom@example.com</span>
    </label>
    <input class="fr-input" spellcheck="false" autocomplete="email" aria-describedby="email-7792-messages" id="email-7792" type="email">
    <div class="fr-messages-group" id="email-7792-messages" aria-live="polite">
    </div>
</div>

Demande et indication de traitement d’une adresse électronique - Erreur

Le format de l’adresse electronique saisie n’est pas valide. Le format attendu est : nom@example.com

<div class="fr-input-group fr-input-group--error" id="input-group-7798">
    <label class="fr-label" for="email-7797">
        Adresse électronique
        <span class="fr-hint-text">Indication : cette adresse est utilisée uniquement pour la connexion au service.</span>
        <span class="fr-hint-text">Format attendu : nom@example.com</span>
    </label>
    <input class="fr-input" spellcheck="false" autocomplete="email" aria-describedby="email-7797-messages" id="email-7797" type="email">
    <div class="fr-messages-group" id="email-7797-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="email-7797-message-error">Le format de l’adresse electronique saisie n’est pas valide. Le format attendu est : nom@example.com</p>
    </div>
</div>

Paramètres d’affichage

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