DSFR v1.15.0

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-7817" aria-labelledby="firstname-disabled-7817-legend firstname-disabled-7817-messages">
    <legend class="fr-sr-only" id="firstname-disabled-7817-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7825">
            <label class="fr-label" for="family-name-7819">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7819-messages" name="family-name" autocomplete="family-name" id="family-name-7819" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7819-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7826">
            <label class="fr-label" for="given-7824">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-7824-messages" name="given-name" autocomplete="given-name" id="given-7824" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-7824-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="firstname-disabled-7817-messages" aria-live="polite">
    </div>
</fieldset>

Avec prénom désactivé

Nom
Prénom

<fieldset class="fr-fieldset" id="firstname-disabled-7840" aria-labelledby="firstname-disabled-7840-legend firstname-disabled-7840-messages">
    <legend class="fr-sr-only" id="firstname-disabled-7840-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7850">
            <label class="fr-label" for="family-name-7842">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7842-messages" name="family-name" autocomplete="family-name" id="family-name-7842" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7842-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7848" disabled aria-labelledby="firstname-fieldset-7848-legend firstname-fieldset-7848-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-7848-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-7851">
                    <label class="fr-label" for="given-7847">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-7847-messages" name="given-name" autocomplete="given-name" id="given-7847" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-7847-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-7848-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-7848')" checked name="firstname-disabled" id="disabler-7849" type="checkbox" aria-describedby="disabler-7849-messages">
            <label class="fr-label" for="disabler-7849">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-7849-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="firstname-disabled-7840-messages" aria-live="polite">
    </div>
</fieldset>

Avec nom d'usage

Nom

<fieldset class="fr-fieldset" id="married-name-7864" aria-labelledby="married-name-7864-legend married-name-7864-messages">
    <legend class="fr-sr-only" id="married-name-7864-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7872">
            <label class="fr-label" for="family-name-7866">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7866-messages" name="family-name" autocomplete="family-name" id="family-name-7866" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7866-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7873">
            <label class="fr-label" for="married-7869">
                Nom d'usage
                <span class="fr-hint-text">Indication : ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-7869-messages" name="married-name" autocomplete="family-name" id="married-7869" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-7869-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7874">
            <label class="fr-label" for="given-7871">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-7871-messages" name="given-name" autocomplete="given-name" id="given-7871" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-7871-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-name-7864-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-7889" aria-labelledby="married-and-firstname-disabled-7889-legend married-and-firstname-disabled-7889-messages">
    <legend class="fr-sr-only" id="married-and-firstname-disabled-7889-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7899">
            <label class="fr-label" for="family-name-7891">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7891-messages" name="family-name" autocomplete="family-name" id="family-name-7891" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7891-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7900">
            <label class="fr-label" for="married-7894">
                Nom d'usage
                <span class="fr-hint-text">Indication : ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-7894-messages" name="married-name" autocomplete="family-name" id="married-7894" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-7894-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7897" disabled aria-labelledby="firstname-fieldset-7897-legend firstname-fieldset-7897-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-7897-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-7901">
                    <label class="fr-label" for="given-7896">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-7896-messages" name="given-name" autocomplete="given-name" id="given-7896" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-7896-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-7897-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-7897')" checked name="firstname-disabled" id="disabler-7898" type="checkbox" aria-describedby="disabler-7898-messages">
            <label class="fr-label" for="disabler-7898">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-7898-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-and-firstname-disabled-7889-messages" aria-live="polite">
    </div>
</fieldset>

Avec bouton

Nom
Prénom

<fieldset class="fr-fieldset" id="button-7915" aria-labelledby="button-7915-legend button-7915-messages">
    <legend class="fr-sr-only" id="button-7915-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7925">
            <label class="fr-label" for="family-name-7917">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7917-messages" name="family-name" autocomplete="family-name" id="family-name-7917" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7917-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7923" aria-labelledby="firstname-fieldset-7923-legend firstname-fieldset-7923-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-7923-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-7926">
                    <label class="fr-label" for="given-7922">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-7922-messages" name="given-name" autocomplete="given-name" id="given-7922" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-7922-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-fieldset__element">
                <button onclick="addFirstname(this, 'given-7922')" 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-7923-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-7923')" name="firstname-disabled" id="disabler-7924" type="checkbox" aria-describedby="disabler-7924-messages">
            <label class="fr-label" for="disabler-7924">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-7924-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-7915-messages" aria-live="polite">
    </div>
</fieldset>

Avec bouton + prénom désactivé

Nom
Prénom

<fieldset class="fr-fieldset" id="button-and-firstname-disabled-7940" aria-labelledby="button-and-firstname-disabled-7940-legend button-and-firstname-disabled-7940-messages">
    <legend class="fr-sr-only" id="button-and-firstname-disabled-7940-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7950">
            <label class="fr-label" for="family-name-7942">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7942-messages" name="family-name" autocomplete="family-name" id="family-name-7942" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7942-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7948" disabled aria-labelledby="firstname-fieldset-7948-legend firstname-fieldset-7948-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-7948-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-7951">
                    <label class="fr-label" for="given-7947">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-7947-messages" name="given-name" autocomplete="given-name" id="given-7947" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-7947-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-fieldset__element">
                <button onclick="addFirstname(this, 'given-7947')" 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-7948-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-7948')" checked name="firstname-disabled" id="disabler-7949" type="checkbox" aria-describedby="disabler-7949-messages">
            <label class="fr-label" for="disabler-7949">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-7949-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-and-firstname-disabled-7940-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-7965" aria-labelledby="name-international-7965-legend name-international-7965-messages">
    <legend class="fr-sr-only" id="name-international-7965-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-7966">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-7966-messages" id="country-7966" 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-7966-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7975">
            <label class="fr-label" for="family-name-7967">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7967-messages" name="family-name" autocomplete="family-name" id="family-name-7967" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7967-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7973" aria-labelledby="firstname-fieldset-7973-legend firstname-fieldset-7973-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-7973-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-7976">
                    <label class="fr-label" for="given-7972">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-7972-messages" name="given-name" autocomplete="given-name" id="given-7972" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-7972-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-7973-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-7973')" name="firstname-disabled" id="disabler-7974" type="checkbox" aria-describedby="disabler-7974-messages">
            <label class="fr-label" for="disabler-7974">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-7974-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-7965-messages" aria-live="polite">
    </div>
</fieldset>

Avec prénom désactivé

Nom
Prénom

<fieldset class="fr-fieldset" id="name-international-7990" aria-labelledby="name-international-7990-legend name-international-7990-messages">
    <legend class="fr-sr-only" id="name-international-7990-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-7991">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-7991-messages" id="country-7991" 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-7991-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-8000">
            <label class="fr-label" for="family-name-7992">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7992-messages" name="family-name" autocomplete="family-name" id="family-name-7992" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7992-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7998" disabled aria-labelledby="firstname-fieldset-7998-legend firstname-fieldset-7998-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-7998-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-8001">
                    <label class="fr-label" for="given-7997">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-7997-messages" name="given-name" autocomplete="given-name" id="given-7997" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-7997-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-7998-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-7998')" checked name="firstname-disabled" id="disabler-7999" type="checkbox" aria-describedby="disabler-7999-messages">
            <label class="fr-label" for="disabler-7999">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-7999-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-7990-messages" aria-live="polite">
    </div>
</fieldset>

Paramètres d’affichage

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