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

Avec prénom désactivé

Nom
Prénom

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

Avec nom d'usage

Nom

<fieldset class="fr-fieldset" id="married-name-813" aria-labelledby="married-name-813-legend married-name-813-messages">
    <legend class="fr-sr-only" id="married-name-813-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-821">
            <label class="fr-label" for="family-name-815">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-815-messages" name="family-name" autocomplete="family-name" id="family-name-815" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-815-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-822">
            <label class="fr-label" for="married-818">
                Nom d'usage
                <span class="fr-hint-text">Indication : ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-818-messages" name="married-name" autocomplete="family-name" id="married-818" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-818-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-823">
            <label class="fr-label" for="given-820">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-820-messages" name="given-name" autocomplete="given-name" id="given-820" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-820-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-name-813-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-838" aria-labelledby="married-and-firstname-disabled-838-legend married-and-firstname-disabled-838-messages">
    <legend class="fr-sr-only" id="married-and-firstname-disabled-838-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-848">
            <label class="fr-label" for="family-name-840">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-840-messages" name="family-name" autocomplete="family-name" id="family-name-840" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-840-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-849">
            <label class="fr-label" for="married-843">
                Nom d'usage
                <span class="fr-hint-text">Indication : ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-843-messages" name="married-name" autocomplete="family-name" id="married-843" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-843-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-846" disabled aria-labelledby="firstname-fieldset-846-legend firstname-fieldset-846-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-846-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-850">
                    <label class="fr-label" for="given-845">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-845-messages" name="given-name" autocomplete="given-name" id="given-845" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-845-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-846-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-846')" checked name="firstname-disabled" id="disabler-847" type="checkbox" aria-describedby="disabler-847-messages">
            <label class="fr-label" for="disabler-847">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-847-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-and-firstname-disabled-838-messages" aria-live="polite">
    </div>
</fieldset>

Avec bouton

Nom
Prénom

<fieldset class="fr-fieldset" id="button-865" aria-labelledby="button-865-legend button-865-messages">
    <legend class="fr-sr-only" id="button-865-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-875">
            <label class="fr-label" for="family-name-867">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-867-messages" name="family-name" autocomplete="family-name" id="family-name-867" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-867-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-873" aria-labelledby="firstname-fieldset-873-legend firstname-fieldset-873-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-873-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-876">
                    <label class="fr-label" for="given-872">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-872-messages" name="given-name" autocomplete="given-name" id="given-872" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-872-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-872')" type="button" id="button-877">
                    Ajouter un prénom
                </button>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-873-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-873')" name="firstname-disabled" id="disabler-874" type="checkbox" aria-describedby="disabler-874-messages">
            <label class="fr-label" for="disabler-874">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-874-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-865-messages" aria-live="polite">
    </div>
</fieldset>

Avec bouton + prénom désactivé

Nom
Prénom

<fieldset class="fr-fieldset" id="button-and-firstname-disabled-892" aria-labelledby="button-and-firstname-disabled-892-legend button-and-firstname-disabled-892-messages">
    <legend class="fr-sr-only" id="button-and-firstname-disabled-892-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-902">
            <label class="fr-label" for="family-name-894">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-894-messages" name="family-name" autocomplete="family-name" id="family-name-894" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-894-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-900" disabled aria-labelledby="firstname-fieldset-900-legend firstname-fieldset-900-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-900-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-903">
                    <label class="fr-label" for="given-899">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-899-messages" name="given-name" autocomplete="given-name" id="given-899" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-899-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-899')" type="button" id="button-904">
                    Ajouter un prénom
                </button>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-900-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-900')" checked name="firstname-disabled" id="disabler-901" type="checkbox" aria-describedby="disabler-901-messages">
            <label class="fr-label" for="disabler-901">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-901-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-and-firstname-disabled-892-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-918" aria-labelledby="name-international-918-legend name-international-918-messages">
    <legend class="fr-sr-only" id="name-international-918-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-919">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-919-messages" id="country-919" 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-919-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-928">
            <label class="fr-label" for="family-name-920">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-920-messages" name="family-name" autocomplete="family-name" id="family-name-920" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-920-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-926" aria-labelledby="firstname-fieldset-926-legend firstname-fieldset-926-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-926-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-929">
                    <label class="fr-label" for="given-925">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-925-messages" name="given-name" autocomplete="given-name" id="given-925" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-925-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-926-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-926')" name="firstname-disabled" id="disabler-927" type="checkbox" aria-describedby="disabler-927-messages">
            <label class="fr-label" for="disabler-927">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-927-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-918-messages" aria-live="polite">
    </div>
</fieldset>

Avec prénom désactivé

Nom
Prénom

<fieldset class="fr-fieldset" id="name-international-943" aria-labelledby="name-international-943-legend name-international-943-messages">
    <legend class="fr-sr-only" id="name-international-943-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-944">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-944-messages" id="country-944" 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-944-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-953">
            <label class="fr-label" for="family-name-945">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-945-messages" name="family-name" autocomplete="family-name" id="family-name-945" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-945-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-951" disabled aria-labelledby="firstname-fieldset-951-legend firstname-fieldset-951-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-951-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-954">
                    <label class="fr-label" for="given-950">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-950-messages" name="given-name" autocomplete="given-name" id="given-950" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-950-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-951-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-951')" checked name="firstname-disabled" id="disabler-952" type="checkbox" aria-describedby="disabler-952-messages">
            <label class="fr-label" for="disabler-952">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-952-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-943-messages" aria-live="polite">
    </div>
</fieldset>

Paramètres d’affichage

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