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

Avec prénom désactivé

Nom
Prénom

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

Avec nom d'usage

Nom

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

Avec bouton

Nom
Prénom

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

Avec bouton + prénom désactivé

Nom
Prénom

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

Avec prénom désactivé

Nom
Prénom

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

Paramètres d’affichage

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