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

Avec prénom désactivé

Nom
Prénom(s) 

<fieldset class="fr-fieldset" id="firstname-disabled-6790" aria-labelledby="firstname-disabled-6790-legend firstname-disabled-6790-messages">
    <legend class="fr-sr-only" id="firstname-disabled-6790-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-6800">
            <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">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-6798" disabled aria-labelledby="firstname-fieldset-6798-legend firstname-fieldset-6798-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-6798-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-6801">
                    <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="firstname-fieldset-6798-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-6798');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-6799" type="checkbox" aria-describedby="disabler-6799-messages">
            <label class="fr-label" for="disabler-6799">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-6799-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="firstname-disabled-6790-messages" aria-live="assertive">
    </div>
</fieldset>

Avec nom d'usage

Nom 

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

Avec bouton

Nom
Prénom(s) 

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

const reference = getFieldsetElement(this);

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

const reference = getFieldsetElement(this);

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

Avec prénom désactivé

Nom
Prénom(s) 

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

Paramètres d’affichage

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