DSFR v1.14.3

Retour

Bloc fonctionnel de nom et prénom (name)

La demande de nom et prénom permet d’aider un utilisateur à saisir son nom et son prénom.

Documentation

Demande d’un nom et d’un prénom en France

Défaut

Nom

<fieldset class="fr-fieldset" id="firstname-disabled-7442" aria-labelledby="firstname-disabled-7442-legend firstname-disabled-7442-messages">
    <legend class="fr-sr-only" id="firstname-disabled-7442-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7450">
            <label class="fr-label" for="family-name-7444">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7444-messages" name="family-name" autocomplete="family-name" id="family-name-7444" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7444-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7451">
            <label class="fr-label" for="given-7449">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-7449-messages" name="given-name" autocomplete="given-name" id="given-7449" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-7449-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="firstname-disabled-7442-messages" aria-live="polite">
    </div>
</fieldset>

Avec prénom désactivé

Nom
Prénom

<fieldset class="fr-fieldset" id="firstname-disabled-7465" aria-labelledby="firstname-disabled-7465-legend firstname-disabled-7465-messages">
    <legend class="fr-sr-only" id="firstname-disabled-7465-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7475">
            <label class="fr-label" for="family-name-7467">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7467-messages" name="family-name" autocomplete="family-name" id="family-name-7467" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7467-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7473" disabled aria-labelledby="firstname-fieldset-7473-legend firstname-fieldset-7473-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-7473-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-7476">
                    <label class="fr-label" for="given-7472">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-7472-messages" name="given-name" autocomplete="given-name" id="given-7472" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-7472-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-7473-messages" aria-live="polite">
            </div>
        </fieldset>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-checkbox-group fr-checkbox-group--sm">
            <input onclick="toggleDisabled(this, 'firstname-fieldset-7473')" checked name="firstname-disabled" id="disabler-7474" type="checkbox" aria-describedby="disabler-7474-messages">
            <label class="fr-label" for="disabler-7474">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-7474-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="firstname-disabled-7465-messages" aria-live="polite">
    </div>
</fieldset>

Avec nom d'usage

Nom

<fieldset class="fr-fieldset" id="married-name-7489" aria-labelledby="married-name-7489-legend married-name-7489-messages">
    <legend class="fr-sr-only" id="married-name-7489-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7497">
            <label class="fr-label" for="family-name-7491">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7491-messages" name="family-name" autocomplete="family-name" id="family-name-7491" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7491-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7498">
            <label class="fr-label" for="married-7494">
                Nom d'usage
                <span class="fr-hint-text">Indication : ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-7494-messages" name="married-name" autocomplete="family-name" id="married-7494" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-7494-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7499">
            <label class="fr-label" for="given-7496">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-7496-messages" name="given-name" autocomplete="given-name" id="given-7496" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-7496-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-name-7489-messages" aria-live="polite">
    </div>
</fieldset>

Avec nom d'usage + prénom désactivé

Nom
Prénom

<fieldset class="fr-fieldset" id="married-and-firstname-disabled-7514" aria-labelledby="married-and-firstname-disabled-7514-legend married-and-firstname-disabled-7514-messages">
    <legend class="fr-sr-only" id="married-and-firstname-disabled-7514-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7524">
            <label class="fr-label" for="family-name-7516">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7516-messages" name="family-name" autocomplete="family-name" id="family-name-7516" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7516-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7525">
            <label class="fr-label" for="married-7519">
                Nom d'usage
                <span class="fr-hint-text">Indication : ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-7519-messages" name="married-name" autocomplete="family-name" id="married-7519" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-7519-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7522" disabled aria-labelledby="firstname-fieldset-7522-legend firstname-fieldset-7522-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-7522-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-7526">
                    <label class="fr-label" for="given-7521">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-7521-messages" name="given-name" autocomplete="given-name" id="given-7521" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-7521-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-7522-messages" aria-live="polite">
            </div>
        </fieldset>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-checkbox-group fr-checkbox-group--sm">
            <input onclick="toggleDisabled(this, 'firstname-fieldset-7522')" checked name="firstname-disabled" id="disabler-7523" type="checkbox" aria-describedby="disabler-7523-messages">
            <label class="fr-label" for="disabler-7523">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-7523-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-and-firstname-disabled-7514-messages" aria-live="polite">
    </div>
</fieldset>

Avec bouton

Nom
Prénom

<fieldset class="fr-fieldset" id="button-7540" aria-labelledby="button-7540-legend button-7540-messages">
    <legend class="fr-sr-only" id="button-7540-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7550">
            <label class="fr-label" for="family-name-7542">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7542-messages" name="family-name" autocomplete="family-name" id="family-name-7542" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7542-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7548" aria-labelledby="firstname-fieldset-7548-legend firstname-fieldset-7548-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-7548-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-7551">
                    <label class="fr-label" for="given-7547">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-7547-messages" name="given-name" autocomplete="given-name" id="given-7547" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-7547-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-fieldset__element">
                <button onclick="addFirstname(this, 'given-7547')" type="button" class="fr-btn fr-btn--sm fr-icon-add-line fr-btn--icon-left fr-btn--secondary">Ajouter un prénom</button>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-7548-messages" aria-live="polite">
            </div>
        </fieldset>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-checkbox-group fr-checkbox-group--sm">
            <input onclick="toggleDisabled(this, 'firstname-fieldset-7548')" name="firstname-disabled" id="disabler-7549" type="checkbox" aria-describedby="disabler-7549-messages">
            <label class="fr-label" for="disabler-7549">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-7549-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-7540-messages" aria-live="polite">
    </div>
</fieldset>

Avec bouton + prénom désactivé

Nom
Prénom

<fieldset class="fr-fieldset" id="button-and-firstname-disabled-7565" aria-labelledby="button-and-firstname-disabled-7565-legend button-and-firstname-disabled-7565-messages">
    <legend class="fr-sr-only" id="button-and-firstname-disabled-7565-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7575">
            <label class="fr-label" for="family-name-7567">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7567-messages" name="family-name" autocomplete="family-name" id="family-name-7567" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7567-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7573" disabled aria-labelledby="firstname-fieldset-7573-legend firstname-fieldset-7573-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-7573-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-7576">
                    <label class="fr-label" for="given-7572">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-7572-messages" name="given-name" autocomplete="given-name" id="given-7572" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-7572-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-fieldset__element">
                <button onclick="addFirstname(this, 'given-7572')" type="button" class="fr-btn fr-btn--sm fr-icon-add-line fr-btn--icon-left fr-btn--secondary">Ajouter un prénom</button>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-7573-messages" aria-live="polite">
            </div>
        </fieldset>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-checkbox-group fr-checkbox-group--sm">
            <input onclick="toggleDisabled(this, 'firstname-fieldset-7573')" checked name="firstname-disabled" id="disabler-7574" type="checkbox" aria-describedby="disabler-7574-messages">
            <label class="fr-label" for="disabler-7574">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-7574-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-and-firstname-disabled-7565-messages" aria-live="polite">
    </div>
</fieldset>

Demande d’un nom et d’un prénom à l’international

Défaut

Nom
Prénom

<fieldset class="fr-fieldset" id="name-international-7590" aria-labelledby="name-international-7590-legend name-international-7590-messages">
    <legend class="fr-sr-only" id="name-international-7590-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-7591">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-7591-messages" id="country-7591" name="country">
                <option value="" selected disabled>Sélectionner une option</option>
                <option value="FR">France</option>
                <option value="DE">Allemagne</option>
                <option value="IT">Italie</option>
                <option value="ES">Espagne</option>
                <option value="GB">Royaume-Uni</option>
            </select>
            <div class="fr-messages-group" id="country-7591-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7600">
            <label class="fr-label" for="family-name-7592">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7592-messages" name="family-name" autocomplete="family-name" id="family-name-7592" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7592-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7598" aria-labelledby="firstname-fieldset-7598-legend firstname-fieldset-7598-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-7598-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-7601">
                    <label class="fr-label" for="given-7597">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-7597-messages" name="given-name" autocomplete="given-name" id="given-7597" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-7597-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-7598-messages" aria-live="polite">
            </div>
        </fieldset>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-checkbox-group fr-checkbox-group--sm">
            <input onclick="toggleDisabled(this, 'firstname-fieldset-7598')" name="firstname-disabled" id="disabler-7599" type="checkbox" aria-describedby="disabler-7599-messages">
            <label class="fr-label" for="disabler-7599">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-7599-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-7590-messages" aria-live="polite">
    </div>
</fieldset>

Avec prénom désactivé

Nom
Prénom

<fieldset class="fr-fieldset" id="name-international-7615" aria-labelledby="name-international-7615-legend name-international-7615-messages">
    <legend class="fr-sr-only" id="name-international-7615-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-7616">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-7616-messages" id="country-7616" name="country">
                <option value="" selected disabled>Sélectionner une option</option>
                <option value="FR">France</option>
                <option value="DE">Allemagne</option>
                <option value="IT">Italie</option>
                <option value="ES">Espagne</option>
                <option value="GB">Royaume-Uni</option>
            </select>
            <div class="fr-messages-group" id="country-7616-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7625">
            <label class="fr-label" for="family-name-7617">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7617-messages" name="family-name" autocomplete="family-name" id="family-name-7617" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7617-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7623" disabled aria-labelledby="firstname-fieldset-7623-legend firstname-fieldset-7623-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-7623-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-7626">
                    <label class="fr-label" for="given-7622">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-7622-messages" name="given-name" autocomplete="given-name" id="given-7622" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-7622-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-7623-messages" aria-live="polite">
            </div>
        </fieldset>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-checkbox-group fr-checkbox-group--sm">
            <input onclick="toggleDisabled(this, 'firstname-fieldset-7623')" checked name="firstname-disabled" id="disabler-7624" type="checkbox" aria-describedby="disabler-7624-messages">
            <label class="fr-label" for="disabler-7624">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-7624-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-7615-messages" aria-live="polite">
    </div>
</fieldset>

Paramètres d’affichage

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