DSFR v1.15.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-7827" aria-labelledby="firstname-disabled-7827-legend firstname-disabled-7827-messages">
    <legend class="fr-sr-only" id="firstname-disabled-7827-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7835">
            <label class="fr-label" for="family-name-7829">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7829-messages" name="family-name" autocomplete="family-name" id="family-name-7829" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7829-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7836">
            <label class="fr-label" for="given-7834">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-7834-messages" name="given-name" autocomplete="given-name" id="given-7834" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-7834-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="firstname-disabled-7827-messages" aria-live="polite">
    </div>
</fieldset>

Avec prénom désactivé

Nom
Prénom

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

Avec nom d'usage

Nom

<fieldset class="fr-fieldset" id="married-name-7874" aria-labelledby="married-name-7874-legend married-name-7874-messages">
    <legend class="fr-sr-only" id="married-name-7874-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7882">
            <label class="fr-label" for="family-name-7876">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7876-messages" name="family-name" autocomplete="family-name" id="family-name-7876" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7876-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7883">
            <label class="fr-label" for="married-7879">
                Nom d'usage
                <span class="fr-hint-text">Indication : ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-7879-messages" name="married-name" autocomplete="family-name" id="married-7879" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-7879-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7884">
            <label class="fr-label" for="given-7881">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-7881-messages" name="given-name" autocomplete="given-name" id="given-7881" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-7881-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-name-7874-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-7899" aria-labelledby="married-and-firstname-disabled-7899-legend married-and-firstname-disabled-7899-messages">
    <legend class="fr-sr-only" id="married-and-firstname-disabled-7899-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7909">
            <label class="fr-label" for="family-name-7901">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7901-messages" name="family-name" autocomplete="family-name" id="family-name-7901" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7901-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7910">
            <label class="fr-label" for="married-7904">
                Nom d'usage
                <span class="fr-hint-text">Indication : ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-7904-messages" name="married-name" autocomplete="family-name" id="married-7904" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-7904-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7907" disabled aria-labelledby="firstname-fieldset-7907-legend firstname-fieldset-7907-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-7907-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-7911">
                    <label class="fr-label" for="given-7906">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-7906-messages" name="given-name" autocomplete="given-name" id="given-7906" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-7906-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-7907-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-7907')" checked name="firstname-disabled" id="disabler-7908" type="checkbox" aria-describedby="disabler-7908-messages">
            <label class="fr-label" for="disabler-7908">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-7908-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-and-firstname-disabled-7899-messages" aria-live="polite">
    </div>
</fieldset>

Avec bouton

Nom
Prénom

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

Avec bouton + prénom désactivé

Nom
Prénom

<fieldset class="fr-fieldset" id="button-and-firstname-disabled-7950" aria-labelledby="button-and-firstname-disabled-7950-legend button-and-firstname-disabled-7950-messages">
    <legend class="fr-sr-only" id="button-and-firstname-disabled-7950-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7960">
            <label class="fr-label" for="family-name-7952">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7952-messages" name="family-name" autocomplete="family-name" id="family-name-7952" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7952-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7958" disabled aria-labelledby="firstname-fieldset-7958-legend firstname-fieldset-7958-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-7958-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-7961">
                    <label class="fr-label" for="given-7957">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-7957-messages" name="given-name" autocomplete="given-name" id="given-7957" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-7957-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-fieldset__element">
                <button onclick="addFirstname(this, 'given-7957')" 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-7958-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-7958')" checked name="firstname-disabled" id="disabler-7959" type="checkbox" aria-describedby="disabler-7959-messages">
            <label class="fr-label" for="disabler-7959">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-7959-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-and-firstname-disabled-7950-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-7975" aria-labelledby="name-international-7975-legend name-international-7975-messages">
    <legend class="fr-sr-only" id="name-international-7975-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-7976">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-7976-messages" id="country-7976" 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-7976-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7985">
            <label class="fr-label" for="family-name-7977">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-7977-messages" name="family-name" autocomplete="family-name" id="family-name-7977" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-7977-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7983" aria-labelledby="firstname-fieldset-7983-legend firstname-fieldset-7983-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-7983-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-7986">
                    <label class="fr-label" for="given-7982">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-7982-messages" name="given-name" autocomplete="given-name" id="given-7982" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-7982-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-7983-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-7983')" name="firstname-disabled" id="disabler-7984" type="checkbox" aria-describedby="disabler-7984-messages">
            <label class="fr-label" for="disabler-7984">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-7984-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-7975-messages" aria-live="polite">
    </div>
</fieldset>

Avec prénom désactivé

Nom
Prénom

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

Paramètres d’affichage

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