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

Avec prénom désactivé

Nom
Prénom(s)

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

Avec nom d'usage

Nom

<fieldset class="fr-fieldset" id="married-name-1486" aria-labelledby="married-name-1486-legend married-name-1486-messages">
    <legend class="fr-sr-only" id="married-name-1486-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="family-name-1488">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-1488-messages" name="family-name" autocomplete="family-name" id="family-name-1488" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-1488-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="married-1491">
                Nom d'usage
                <span class="fr-hint-text">Ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-1491-messages" name="married-name" autocomplete="family-name" id="married-1491" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-1491-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="given-1493">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-1493-messages" name="given-name" autocomplete="given-name" id="given-1493" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-1493-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-name-1486-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-1505" aria-labelledby="married-and-firstname-disabled-1505-legend married-and-firstname-disabled-1505-messages">
    <legend class="fr-sr-only" id="married-and-firstname-disabled-1505-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="family-name-1507">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-1507-messages" name="family-name" autocomplete="family-name" id="family-name-1507" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-1507-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="married-1510">
                Nom d'usage
                <span class="fr-hint-text">Ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-1510-messages" name="married-name" autocomplete="family-name" id="married-1510" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-1510-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-1513" disabled aria-labelledby="firstname-fieldset-1513-legend firstname-fieldset-1513-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-1513-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group">
                    <label class="fr-label" for="given-1512">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-1512-messages" name="given-name" autocomplete="given-name" id="given-1512" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-1512-messages" aria-live="assertive">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-1513-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-1513');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-1514" type="checkbox" aria-describedby="disabler-1514-messages">
            <label class="fr-label" for="disabler-1514">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-1514-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-and-firstname-disabled-1505-messages" aria-live="assertive">
    </div>
</fieldset>

Avec bouton

Nom
Prénom(s)

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

const reference = getFieldsetElement(this);

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

const reference = getFieldsetElement(this);

const copy = firstname.cloneNode(true);
copy.innerHTML = copy.innerHTML.replace(/given-1554/g, `given-1554-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">
                    Ajouter un prénom
                </button>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-1555-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-1555');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-1556" type="checkbox" aria-describedby="disabler-1556-messages">
            <label class="fr-label" for="disabler-1556">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-1556-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-and-firstname-disabled-1547-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-1568" aria-labelledby="name-international-1568-legend name-international-1568-messages">
    <legend class="fr-sr-only" id="name-international-1568-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-1569">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-1569-messages" id="country-1569" 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-1569-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="family-name-1570">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-1570-messages" name="family-name" autocomplete="family-name" id="family-name-1570" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-1570-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-1576" aria-labelledby="firstname-fieldset-1576-legend firstname-fieldset-1576-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-1576-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group">
                    <label class="fr-label" for="given-1575">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-1575-messages" name="given-name" autocomplete="given-name" id="given-1575" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-1575-messages" aria-live="assertive">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-1576-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-1576');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" name="firstname-disabled" id="disabler-1577" type="checkbox" aria-describedby="disabler-1577-messages">
            <label class="fr-label" for="disabler-1577">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-1577-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-1568-messages" aria-live="assertive">
    </div>
</fieldset>

Avec prénom désactivé

Nom
Prénom(s)

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

Paramètres d’affichage

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