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.

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

Défaut

Nom

<fieldset class="fr-fieldset" id="firstname-disabled-786" aria-labelledby="firstname-disabled-786-legend firstname-disabled-786-messages">
    <legend class="fr-sr-only" id="firstname-disabled-786-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-794">
            <label class="fr-label" for="family-name-788">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-788-messages" name="family-name" autocomplete="family-name" id="family-name-788" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-788-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-795">
            <label class="fr-label" for="given-793">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-793-messages" name="given-name" autocomplete="given-name" id="given-793" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-793-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="firstname-disabled-786-messages" aria-live="polite">
    </div>
</fieldset>

Avec prénom désactivé

Nom
Prénom

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

Avec nom d'usage

Nom

<fieldset class="fr-fieldset" id="married-name-833" aria-labelledby="married-name-833-legend married-name-833-messages">
    <legend class="fr-sr-only" id="married-name-833-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-841">
            <label class="fr-label" for="family-name-835">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-835-messages" name="family-name" autocomplete="family-name" id="family-name-835" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-835-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-842">
            <label class="fr-label" for="married-838">
                Nom d'usage
                <span class="fr-hint-text">Indication : ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-838-messages" name="married-name" autocomplete="family-name" id="married-838" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-838-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-843">
            <label class="fr-label" for="given-840">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-840-messages" name="given-name" autocomplete="given-name" id="given-840" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-840-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-name-833-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-858" aria-labelledby="married-and-firstname-disabled-858-legend married-and-firstname-disabled-858-messages">
    <legend class="fr-sr-only" id="married-and-firstname-disabled-858-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-868">
            <label class="fr-label" for="family-name-860">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-860-messages" name="family-name" autocomplete="family-name" id="family-name-860" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-860-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-869">
            <label class="fr-label" for="married-863">
                Nom d'usage
                <span class="fr-hint-text">Indication : ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-863-messages" name="married-name" autocomplete="family-name" id="married-863" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-863-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-866" disabled aria-labelledby="firstname-fieldset-866-legend firstname-fieldset-866-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-866-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-870">
                    <label class="fr-label" for="given-865">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-865-messages" name="given-name" autocomplete="given-name" id="given-865" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-865-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-866-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-866')" checked name="firstname-disabled" id="disabler-867" type="checkbox" aria-describedby="disabler-867-messages">
            <label class="fr-label" for="disabler-867">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-867-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-and-firstname-disabled-858-messages" aria-live="polite">
    </div>
</fieldset>

Avec bouton

Nom
Prénom

<fieldset class="fr-fieldset" id="button-885" aria-labelledby="button-885-legend button-885-messages">
    <legend class="fr-sr-only" id="button-885-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-895">
            <label class="fr-label" for="family-name-887">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-887-messages" name="family-name" autocomplete="family-name" id="family-name-887" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-887-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-893" aria-labelledby="firstname-fieldset-893-legend firstname-fieldset-893-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-893-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-896">
                    <label class="fr-label" for="given-892">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-892-messages" name="given-name" autocomplete="given-name" id="given-892" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-892-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-fieldset__element">
                <button class="fr-btn fr-btn--sm fr-icon-add-line fr-btn--icon-left fr-btn--tertiary" onclick="addFirstname(this, 'given-892')" type="button" id="button-897">
                    Ajouter un prénom
                </button>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-893-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-893')" name="firstname-disabled" id="disabler-894" type="checkbox" aria-describedby="disabler-894-messages">
            <label class="fr-label" for="disabler-894">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-894-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-885-messages" aria-live="polite">
    </div>
</fieldset>

Avec bouton + prénom désactivé

Nom
Prénom

<fieldset class="fr-fieldset" id="button-and-firstname-disabled-912" aria-labelledby="button-and-firstname-disabled-912-legend button-and-firstname-disabled-912-messages">
    <legend class="fr-sr-only" id="button-and-firstname-disabled-912-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-922">
            <label class="fr-label" for="family-name-914">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-914-messages" name="family-name" autocomplete="family-name" id="family-name-914" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-914-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-920" disabled aria-labelledby="firstname-fieldset-920-legend firstname-fieldset-920-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-920-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-923">
                    <label class="fr-label" for="given-919">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-919-messages" name="given-name" autocomplete="given-name" id="given-919" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-919-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-fieldset__element">
                <button class="fr-btn fr-btn--sm fr-icon-add-line fr-btn--icon-left fr-btn--tertiary" onclick="addFirstname(this, 'given-919')" type="button" id="button-924">
                    Ajouter un prénom
                </button>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-920-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-920')" checked name="firstname-disabled" id="disabler-921" type="checkbox" aria-describedby="disabler-921-messages">
            <label class="fr-label" for="disabler-921">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-921-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-and-firstname-disabled-912-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-938" aria-labelledby="name-international-938-legend name-international-938-messages">
    <legend class="fr-sr-only" id="name-international-938-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-939">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-939-messages" id="country-939" 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-939-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-948">
            <label class="fr-label" for="family-name-940">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-940-messages" name="family-name" autocomplete="family-name" id="family-name-940" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-940-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-946" aria-labelledby="firstname-fieldset-946-legend firstname-fieldset-946-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-946-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-949">
                    <label class="fr-label" for="given-945">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-945-messages" name="given-name" autocomplete="given-name" id="given-945" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-945-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-946-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-946')" name="firstname-disabled" id="disabler-947" type="checkbox" aria-describedby="disabler-947-messages">
            <label class="fr-label" for="disabler-947">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-947-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-938-messages" aria-live="polite">
    </div>
</fieldset>

Avec prénom désactivé

Nom
Prénom

<fieldset class="fr-fieldset" id="name-international-963" aria-labelledby="name-international-963-legend name-international-963-messages">
    <legend class="fr-sr-only" id="name-international-963-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-964">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-964-messages" id="country-964" 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-964-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-973">
            <label class="fr-label" for="family-name-965">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-965-messages" name="family-name" autocomplete="family-name" id="family-name-965" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-965-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-971" disabled aria-labelledby="firstname-fieldset-971-legend firstname-fieldset-971-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-971-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-974">
                    <label class="fr-label" for="given-970">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-970-messages" name="given-name" autocomplete="given-name" id="given-970" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-970-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-971-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-971')" checked name="firstname-disabled" id="disabler-972" type="checkbox" aria-describedby="disabler-972-messages">
            <label class="fr-label" for="disabler-972">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-972-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-963-messages" aria-live="polite">
    </div>
</fieldset>

Paramètres d’affichage

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