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-6764" aria-labelledby="firstname-disabled-6764-legend firstname-disabled-6764-messages">
    <legend class="fr-sr-only" id="firstname-disabled-6764-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6772">
            <label class="fr-label" for="family-name-6766">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-6766-messages" name="family-name" autocomplete="family-name" id="family-name-6766" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-6766-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6773">
            <label class="fr-label" for="given-6771">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-6771-messages" name="given-name" autocomplete="given-name" id="given-6771" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-6771-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="firstname-disabled-6764-messages" aria-live="assertive">
    </div>
</fieldset>

Avec prénom désactivé

Nom
Prénom(s) 

<fieldset class="fr-fieldset" id="firstname-disabled-6787" aria-labelledby="firstname-disabled-6787-legend firstname-disabled-6787-messages">
    <legend class="fr-sr-only" id="firstname-disabled-6787-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6797">
            <label class="fr-label" for="family-name-6789">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-6789-messages" name="family-name" autocomplete="family-name" id="family-name-6789" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-6789-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-6795" disabled aria-labelledby="firstname-fieldset-6795-legend firstname-fieldset-6795-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-6795-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-6798">
                    <label class="fr-label" for="given-6794">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-6794-messages" name="given-name" autocomplete="given-name" id="given-6794" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-6794-messages" aria-live="assertive">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-6795-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-6795');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-6796" type="checkbox" aria-describedby="disabler-6796-messages">
            <label class="fr-label" for="disabler-6796">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-6796-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="firstname-disabled-6787-messages" aria-live="assertive">
    </div>
</fieldset>

Avec nom d'usage

Nom 

<fieldset class="fr-fieldset" id="married-name-6811" aria-labelledby="married-name-6811-legend married-name-6811-messages">
    <legend class="fr-sr-only" id="married-name-6811-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6819">
            <label class="fr-label" for="family-name-6813">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-6813-messages" name="family-name" autocomplete="family-name" id="family-name-6813" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-6813-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6820">
            <label class="fr-label" for="married-6816">
                Nom d'usage
                <span class="fr-hint-text">Ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-6816-messages" name="married-name" autocomplete="family-name" id="married-6816" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-6816-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6821">
            <label class="fr-label" for="given-6818">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-6818-messages" name="given-name" autocomplete="given-name" id="given-6818" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-6818-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-name-6811-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-6836" aria-labelledby="married-and-firstname-disabled-6836-legend married-and-firstname-disabled-6836-messages">
    <legend class="fr-sr-only" id="married-and-firstname-disabled-6836-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6846">
            <label class="fr-label" for="family-name-6838">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-6838-messages" name="family-name" autocomplete="family-name" id="family-name-6838" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-6838-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6847">
            <label class="fr-label" for="married-6841">
                Nom d'usage
                <span class="fr-hint-text">Ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-6841-messages" name="married-name" autocomplete="family-name" id="married-6841" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-6841-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-6844" disabled aria-labelledby="firstname-fieldset-6844-legend firstname-fieldset-6844-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-6844-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-6848">
                    <label class="fr-label" for="given-6843">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-6843-messages" name="given-name" autocomplete="given-name" id="given-6843" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-6843-messages" aria-live="assertive">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-6844-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-6844');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-6845" type="checkbox" aria-describedby="disabler-6845-messages">
            <label class="fr-label" for="disabler-6845">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-6845-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-and-firstname-disabled-6836-messages" aria-live="assertive">
    </div>
</fieldset>

Avec bouton

Nom
Prénom(s) 

<fieldset class="fr-fieldset" id="button-6863" aria-labelledby="button-6863-legend button-6863-messages">
    <legend class="fr-sr-only" id="button-6863-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6873">
            <label class="fr-label" for="family-name-6865">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-6865-messages" name="family-name" autocomplete="family-name" id="family-name-6865" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-6865-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-6871" aria-labelledby="firstname-fieldset-6871-legend firstname-fieldset-6871-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-6871-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-6874">
                    <label class="fr-label" for="given-6870">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-6870-messages" name="given-name" autocomplete="given-name" id="given-6870" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-6870-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-6870'));

const reference = getFieldsetElement(this);

const copy = firstname.cloneNode(true);
copy.innerHTML = copy.innerHTML.replace(/given-6870/g, `given-6870-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-6875">
                    Ajouter un prénom
                </button>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-6871-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-6871');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" name="firstname-disabled" id="disabler-6872" type="checkbox" aria-describedby="disabler-6872-messages">
            <label class="fr-label" for="disabler-6872">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-6872-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-6863-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-6890" aria-labelledby="button-and-firstname-disabled-6890-legend button-and-firstname-disabled-6890-messages">
    <legend class="fr-sr-only" id="button-and-firstname-disabled-6890-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6900">
            <label class="fr-label" for="family-name-6892">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-6892-messages" name="family-name" autocomplete="family-name" id="family-name-6892" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-6892-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-6898" disabled aria-labelledby="firstname-fieldset-6898-legend firstname-fieldset-6898-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-6898-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-6901">
                    <label class="fr-label" for="given-6897">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-6897-messages" name="given-name" autocomplete="given-name" id="given-6897" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-6897-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-6897'));

const reference = getFieldsetElement(this);

const copy = firstname.cloneNode(true);
copy.innerHTML = copy.innerHTML.replace(/given-6897/g, `given-6897-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-6902">
                    Ajouter un prénom
                </button>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-6898-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-6898');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-6899" type="checkbox" aria-describedby="disabler-6899-messages">
            <label class="fr-label" for="disabler-6899">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-6899-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-and-firstname-disabled-6890-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-6916" aria-labelledby="name-international-6916-legend name-international-6916-messages">
    <legend class="fr-sr-only" id="name-international-6916-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-6917">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-6917-messages" id="country-6917" 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-6917-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6926">
            <label class="fr-label" for="family-name-6918">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-6918-messages" name="family-name" autocomplete="family-name" id="family-name-6918" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-6918-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-6924" aria-labelledby="firstname-fieldset-6924-legend firstname-fieldset-6924-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-6924-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-6927">
                    <label class="fr-label" for="given-6923">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-6923-messages" name="given-name" autocomplete="given-name" id="given-6923" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-6923-messages" aria-live="assertive">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-6924-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-6924');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" name="firstname-disabled" id="disabler-6925" type="checkbox" aria-describedby="disabler-6925-messages">
            <label class="fr-label" for="disabler-6925">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-6925-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-6916-messages" aria-live="assertive">
    </div>
</fieldset>

Avec prénom désactivé

Nom
Prénom(s) 

<fieldset class="fr-fieldset" id="name-international-6941" aria-labelledby="name-international-6941-legend name-international-6941-messages">
    <legend class="fr-sr-only" id="name-international-6941-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-6942">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-6942-messages" id="country-6942" 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-6942-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6951">
            <label class="fr-label" for="family-name-6943">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-6943-messages" name="family-name" autocomplete="family-name" id="family-name-6943" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-6943-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-6949" disabled aria-labelledby="firstname-fieldset-6949-legend firstname-fieldset-6949-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-6949-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-6952">
                    <label class="fr-label" for="given-6948">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-6948-messages" name="given-name" autocomplete="given-name" id="given-6948" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-6948-messages" aria-live="assertive">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-6949-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-6949');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-6950" type="checkbox" aria-describedby="disabler-6950-messages">
            <label class="fr-label" for="disabler-6950">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-6950-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-6941-messages" aria-live="assertive">
    </div>
</fieldset>

Paramètres d’affichage

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