DSFR v1.13.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-672" aria-labelledby="firstname-disabled-672-legend firstname-disabled-672-messages">
    <legend class="fr-sr-only" id="firstname-disabled-672-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-680">
            <label class="fr-label" for="family-name-674">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-674-messages" name="family-name" autocomplete="family-name" id="family-name-674" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-674-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-681">
            <label class="fr-label" for="given-679">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-679-messages" name="given-name" autocomplete="given-name" id="given-679" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-679-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="firstname-disabled-672-messages" aria-live="polite">
    </div>
</fieldset>

Avec prénom désactivé

Nom
Prénom

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

Avec nom d'usage

Nom

<fieldset class="fr-fieldset" id="married-name-719" aria-labelledby="married-name-719-legend married-name-719-messages">
    <legend class="fr-sr-only" id="married-name-719-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-727">
            <label class="fr-label" for="family-name-721">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-721-messages" name="family-name" autocomplete="family-name" id="family-name-721" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-721-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-728">
            <label class="fr-label" for="married-724">
                Nom d'usage
                <span class="fr-hint-text">Indication : ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-724-messages" name="married-name" autocomplete="family-name" id="married-724" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-724-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-729">
            <label class="fr-label" for="given-726">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-726-messages" name="given-name" autocomplete="given-name" id="given-726" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-726-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-name-719-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-744" aria-labelledby="married-and-firstname-disabled-744-legend married-and-firstname-disabled-744-messages">
    <legend class="fr-sr-only" id="married-and-firstname-disabled-744-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-754">
            <label class="fr-label" for="family-name-746">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-746-messages" name="family-name" autocomplete="family-name" id="family-name-746" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-746-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-755">
            <label class="fr-label" for="married-749">
                Nom d'usage
                <span class="fr-hint-text">Indication : ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-749-messages" name="married-name" autocomplete="family-name" id="married-749" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-749-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-752" disabled aria-labelledby="firstname-fieldset-752-legend firstname-fieldset-752-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-752-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-756">
                    <label class="fr-label" for="given-751">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-751-messages" name="given-name" autocomplete="given-name" id="given-751" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-751-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-752-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-752')" checked name="firstname-disabled" id="disabler-753" type="checkbox" aria-describedby="disabler-753-messages">
            <label class="fr-label" for="disabler-753">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-753-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-and-firstname-disabled-744-messages" aria-live="polite">
    </div>
</fieldset>

Avec bouton

Nom
Prénom

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

Avec bouton + prénom désactivé

Nom
Prénom

<fieldset class="fr-fieldset" id="button-and-firstname-disabled-795" aria-labelledby="button-and-firstname-disabled-795-legend button-and-firstname-disabled-795-messages">
    <legend class="fr-sr-only" id="button-and-firstname-disabled-795-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-805">
            <label class="fr-label" for="family-name-797">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-797-messages" name="family-name" autocomplete="family-name" id="family-name-797" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-797-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-803" disabled aria-labelledby="firstname-fieldset-803-legend firstname-fieldset-803-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-803-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-806">
                    <label class="fr-label" for="given-802">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-802-messages" name="given-name" autocomplete="given-name" id="given-802" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-802-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-fieldset__element">
                <button onclick="addFirstname(this, 'given-802')" 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-803-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-803')" checked name="firstname-disabled" id="disabler-804" type="checkbox" aria-describedby="disabler-804-messages">
            <label class="fr-label" for="disabler-804">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-804-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-and-firstname-disabled-795-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-820" aria-labelledby="name-international-820-legend name-international-820-messages">
    <legend class="fr-sr-only" id="name-international-820-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-821">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-821-messages" id="country-821" name="country">
                <option value="" selected disabled hidden>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-821-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-830">
            <label class="fr-label" for="family-name-822">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-822-messages" name="family-name" autocomplete="family-name" id="family-name-822" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-822-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-828" aria-labelledby="firstname-fieldset-828-legend firstname-fieldset-828-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-828-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-831">
                    <label class="fr-label" for="given-827">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-827-messages" name="given-name" autocomplete="given-name" id="given-827" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-827-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-828-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-828')" name="firstname-disabled" id="disabler-829" type="checkbox" aria-describedby="disabler-829-messages">
            <label class="fr-label" for="disabler-829">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-829-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-820-messages" aria-live="polite">
    </div>
</fieldset>

Avec prénom désactivé

Nom
Prénom

<fieldset class="fr-fieldset" id="name-international-845" aria-labelledby="name-international-845-legend name-international-845-messages">
    <legend class="fr-sr-only" id="name-international-845-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-846">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-846-messages" id="country-846" name="country">
                <option value="" selected disabled hidden>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-846-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-855">
            <label class="fr-label" for="family-name-847">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-847-messages" name="family-name" autocomplete="family-name" id="family-name-847" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-847-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-853" disabled aria-labelledby="firstname-fieldset-853-legend firstname-fieldset-853-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-853-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-856">
                    <label class="fr-label" for="given-852">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-852-messages" name="given-name" autocomplete="given-name" id="given-852" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-852-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-853-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-853')" checked name="firstname-disabled" id="disabler-854" type="checkbox" aria-describedby="disabler-854-messages">
            <label class="fr-label" for="disabler-854">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-854-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-845-messages" aria-live="polite">
    </div>
</fieldset>

Paramètres d’affichage

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