Retour

Modèle de bloc 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-6743" aria-labelledby="firstname-disabled-6743-legend firstname-disabled-6743-messages">
    <legend class="fr-sr-only" id="firstname-disabled-6743-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6751">
            <label class="fr-label" for="family-name-6745">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-6745-messages" name="family-name" autocomplete="family-name" id="family-name-6745" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-6745-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6752">
            <label class="fr-label" for="given-6750">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-6750-messages" name="given-name" autocomplete="given-name" id="given-6750" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-6750-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="firstname-disabled-6743-messages" aria-live="assertive">
    </div>
</fieldset>

Avec prénom désactivé

Nom
Prénom(s) 

<fieldset class="fr-fieldset" id="firstname-disabled-6766" aria-labelledby="firstname-disabled-6766-legend firstname-disabled-6766-messages">
    <legend class="fr-sr-only" id="firstname-disabled-6766-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6776">
            <label class="fr-label" for="family-name-6768">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-6768-messages" name="family-name" autocomplete="family-name" id="family-name-6768" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-6768-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-6774" disabled aria-labelledby="firstname-fieldset-6774-legend firstname-fieldset-6774-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-6774-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-6777">
                    <label class="fr-label" for="given-6773">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-6773-messages" name="given-name" autocomplete="given-name" id="given-6773" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-6773-messages" aria-live="assertive">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-6774-messages" aria-live="assertive">
            </div>
        </fieldset>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-checkbox-group fr-checkbox-group--sm">
            <input onclick="const fieldset = document.getElementById('firstname-fieldset-6774');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-6775" type="checkbox" aria-describedby="disabler-6775-messages">
            <label class="fr-label" for="disabler-6775">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-6775-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="firstname-disabled-6766-messages" aria-live="assertive">
    </div>
</fieldset>

Avec nom d'usage

Nom 

<fieldset class="fr-fieldset" id="married-name-6790" aria-labelledby="married-name-6790-legend married-name-6790-messages">
    <legend class="fr-sr-only" id="married-name-6790-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6798">
            <label class="fr-label" for="family-name-6792">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-6792-messages" name="family-name" autocomplete="family-name" id="family-name-6792" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-6792-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6799">
            <label class="fr-label" for="married-6795">
                Nom d'usage
                <span class="fr-hint-text">Ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-6795-messages" name="married-name" autocomplete="family-name" id="married-6795" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-6795-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6800">
            <label class="fr-label" for="given-6797">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-6797-messages" name="given-name" autocomplete="given-name" id="given-6797" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-6797-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-name-6790-messages" aria-live="assertive">
    </div>
</fieldset>

Avec nom d'usage + prénom désactivé

Nom
Prénom(s) 

<fieldset class="fr-fieldset" id="married-and-firstname-disabled-6815" aria-labelledby="married-and-firstname-disabled-6815-legend married-and-firstname-disabled-6815-messages">
    <legend class="fr-sr-only" id="married-and-firstname-disabled-6815-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6825">
            <label class="fr-label" for="family-name-6817">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-6817-messages" name="family-name" autocomplete="family-name" id="family-name-6817" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-6817-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6826">
            <label class="fr-label" for="married-6820">
                Nom d'usage
                <span class="fr-hint-text">Ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-6820-messages" name="married-name" autocomplete="family-name" id="married-6820" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-6820-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-6823" disabled aria-labelledby="firstname-fieldset-6823-legend firstname-fieldset-6823-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-6823-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-6827">
                    <label class="fr-label" for="given-6822">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-6822-messages" name="given-name" autocomplete="given-name" id="given-6822" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-6822-messages" aria-live="assertive">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-6823-messages" aria-live="assertive">
            </div>
        </fieldset>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-checkbox-group fr-checkbox-group--sm">
            <input onclick="const fieldset = document.getElementById('firstname-fieldset-6823');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-6824" type="checkbox" aria-describedby="disabler-6824-messages">
            <label class="fr-label" for="disabler-6824">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-6824-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-and-firstname-disabled-6815-messages" aria-live="assertive">
    </div>
</fieldset>

Avec bouton

Nom
Prénom(s) 

<fieldset class="fr-fieldset" id="button-6842" aria-labelledby="button-6842-legend button-6842-messages">
    <legend class="fr-sr-only" id="button-6842-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6852">
            <label class="fr-label" for="family-name-6844">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-6844-messages" name="family-name" autocomplete="family-name" id="family-name-6844" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-6844-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-6850" aria-labelledby="firstname-fieldset-6850-legend firstname-fieldset-6850-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-6850-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-6853">
                    <label class="fr-label" for="given-6849">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-6849-messages" name="given-name" autocomplete="given-name" id="given-6849" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-6849-messages" aria-live="assertive">
                    </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="if (this.firstnamesCount === undefined) this.firstnamesCount = 1;
else this.firstnamesCount++;

const getFieldsetElement = (node) => {
  const parent = node.parentNode;
  if (parent.className.indexOf('fr-fieldset__element') > -1) return parent;
  return getFieldsetElement(parent);
};

const firstname = getFieldsetElement(document.getElementById('given-6849'));

const reference = getFieldsetElement(this);

const copy = firstname.cloneNode(true);
copy.innerHTML = copy.innerHTML.replace(/given-6849/g, `given-6849-added-${this.firstnamesCount}`).replace('name=&quot;given-name&quot;', `name=&quot;additional-name-${this.firstnamesCount}&quot;`).replace('autocomplete=&quot;given-name&quot;', 'autocomplete=&quot;additional-name&quot;');
const container = reference.parentNode;
container.insertBefore(copy, reference);
" type="button" id="button-6854">
                    Ajouter un prénom
                </button>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-6850-messages" aria-live="assertive">
            </div>
        </fieldset>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-checkbox-group fr-checkbox-group--sm">
            <input onclick="const fieldset = document.getElementById('firstname-fieldset-6850');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" name="firstname-disabled" id="disabler-6851" type="checkbox" aria-describedby="disabler-6851-messages">
            <label class="fr-label" for="disabler-6851">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-6851-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-6842-messages" aria-live="assertive">
    </div>
</fieldset>

Avec bouton + prénom désactivé

Nom
Prénom(s) 

<fieldset class="fr-fieldset" id="button-and-firstname-disabled-6869" aria-labelledby="button-and-firstname-disabled-6869-legend button-and-firstname-disabled-6869-messages">
    <legend class="fr-sr-only" id="button-and-firstname-disabled-6869-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6879">
            <label class="fr-label" for="family-name-6871">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-6871-messages" name="family-name" autocomplete="family-name" id="family-name-6871" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-6871-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-6877" disabled aria-labelledby="firstname-fieldset-6877-legend firstname-fieldset-6877-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-6877-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-6880">
                    <label class="fr-label" for="given-6876">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-6876-messages" name="given-name" autocomplete="given-name" id="given-6876" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-6876-messages" aria-live="assertive">
                    </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="if (this.firstnamesCount === undefined) this.firstnamesCount = 1;
else this.firstnamesCount++;

const getFieldsetElement = (node) => {
  const parent = node.parentNode;
  if (parent.className.indexOf('fr-fieldset__element') > -1) return parent;
  return getFieldsetElement(parent);
};

const firstname = getFieldsetElement(document.getElementById('given-6876'));

const reference = getFieldsetElement(this);

const copy = firstname.cloneNode(true);
copy.innerHTML = copy.innerHTML.replace(/given-6876/g, `given-6876-added-${this.firstnamesCount}`).replace('name=&quot;given-name&quot;', `name=&quot;additional-name-${this.firstnamesCount}&quot;`).replace('autocomplete=&quot;given-name&quot;', 'autocomplete=&quot;additional-name&quot;');
const container = reference.parentNode;
container.insertBefore(copy, reference);
" type="button" id="button-6881">
                    Ajouter un prénom
                </button>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-6877-messages" aria-live="assertive">
            </div>
        </fieldset>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-checkbox-group fr-checkbox-group--sm">
            <input onclick="const fieldset = document.getElementById('firstname-fieldset-6877');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-6878" type="checkbox" aria-describedby="disabler-6878-messages">
            <label class="fr-label" for="disabler-6878">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-6878-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-and-firstname-disabled-6869-messages" aria-live="assertive">
    </div>
</fieldset>

Demande d’un nom et d’un prénom à l’international

Défaut

Nom
Prénom(s) 

<fieldset class="fr-fieldset" id="name-international-6895" aria-labelledby="name-international-6895-legend name-international-6895-messages">
    <legend class="fr-sr-only" id="name-international-6895-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-6896">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-6896-messages" id="country-6896" 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-6896-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6905">
            <label class="fr-label" for="family-name-6897">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-6897-messages" name="family-name" autocomplete="family-name" id="family-name-6897" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-6897-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-6903" aria-labelledby="firstname-fieldset-6903-legend firstname-fieldset-6903-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-6903-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-6906">
                    <label class="fr-label" for="given-6902">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-6902-messages" name="given-name" autocomplete="given-name" id="given-6902" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-6902-messages" aria-live="assertive">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-6903-messages" aria-live="assertive">
            </div>
        </fieldset>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-checkbox-group fr-checkbox-group--sm">
            <input onclick="const fieldset = document.getElementById('firstname-fieldset-6903');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" name="firstname-disabled" id="disabler-6904" type="checkbox" aria-describedby="disabler-6904-messages">
            <label class="fr-label" for="disabler-6904">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-6904-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-6895-messages" aria-live="assertive">
    </div>
</fieldset>

Avec prénom désactivé

Nom
Prénom(s) 

<fieldset class="fr-fieldset" id="name-international-6920" aria-labelledby="name-international-6920-legend name-international-6920-messages">
    <legend class="fr-sr-only" id="name-international-6920-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-6921">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-6921-messages" id="country-6921" 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-6921-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6930">
            <label class="fr-label" for="family-name-6922">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-6922-messages" name="family-name" autocomplete="family-name" id="family-name-6922" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-6922-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-6928" disabled aria-labelledby="firstname-fieldset-6928-legend firstname-fieldset-6928-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-6928-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-6931">
                    <label class="fr-label" for="given-6927">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-6927-messages" name="given-name" autocomplete="given-name" id="given-6927" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-6927-messages" aria-live="assertive">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-6928-messages" aria-live="assertive">
            </div>
        </fieldset>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-checkbox-group fr-checkbox-group--sm">
            <input onclick="const fieldset = document.getElementById('firstname-fieldset-6928');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-6929" type="checkbox" aria-describedby="disabler-6929-messages">
            <label class="fr-label" for="disabler-6929">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-6929-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-6920-messages" aria-live="assertive">
    </div>
</fieldset>

Paramètres d’affichage

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