La demande de nom et prénom permet d’aider un utilisateur à saisir son nom et son prénom.
<fieldset class="fr-fieldset" id="firstname-disabled-1447" aria-labelledby="firstname-disabled-1447-legend firstname-disabled-1447-messages">
<legend class="fr-sr-only" id="firstname-disabled-1447-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="family-name-1449">
Nom
</label>
<input class="fr-input" autocomplete="family-name" aria-describedby="family-name-1449-messages" name="family-name" id="family-name-1449" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-1449-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="given-1454">
Prénom
</label>
<input class="fr-input" autocomplete="given-name" aria-describedby="given-1454-messages" name="given-name" id="given-1454" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-1454-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-disabled-1447-messages" aria-live="assertive">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="firstname-disabled-1466" aria-labelledby="firstname-disabled-1466-legend firstname-disabled-1466-messages">
<legend class="fr-sr-only" id="firstname-disabled-1466-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="family-name-1468">
Nom
</label>
<input class="fr-input" autocomplete="family-name" aria-describedby="family-name-1468-messages" name="family-name" id="family-name-1468" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-1468-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-1474" disabled aria-labelledby="firstname-fieldset-1474-legend firstname-fieldset-1474-messages">
<legend class="fr-sr-only" id="firstname-fieldset-1474-legend">
Prénom(s)
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="given-1473">
Prénom
</label>
<input class="fr-input" autocomplete="given-name" aria-describedby="given-1473-messages" name="given-name" id="given-1473" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-1473-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-fieldset-1474-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-1474');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-1475" type="checkbox" aria-describedby="disabler-1475-messages">
<label class="fr-label" for="disabler-1475">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-1475-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-disabled-1466-messages" aria-live="assertive">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="married-name-1485" aria-labelledby="married-name-1485-legend married-name-1485-messages">
<legend class="fr-sr-only" id="married-name-1485-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="family-name-1487">
Nom
</label>
<input class="fr-input" autocomplete="family-name" aria-describedby="family-name-1487-messages" name="family-name" id="family-name-1487" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-1487-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="married-1490">
Nom d'usage
<span class="fr-hint-text">Ancien nom…</span>
</label>
<input class="fr-input" aria-describedby="married-1490-messages" name="married-name" id="married-1490" spellcheck="false" type="text">
<div class="fr-messages-group" id="married-1490-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="given-1492">
Prénom
</label>
<input class="fr-input" autocomplete="given-name" aria-describedby="given-1492-messages" name="given-name" id="given-1492" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-1492-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="married-name-1485-messages" aria-live="assertive">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="married-and-firstname-disabled-1504" aria-labelledby="married-and-firstname-disabled-1504-legend married-and-firstname-disabled-1504-messages">
<legend class="fr-sr-only" id="married-and-firstname-disabled-1504-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="family-name-1506">
Nom
</label>
<input class="fr-input" autocomplete="family-name" aria-describedby="family-name-1506-messages" name="family-name" id="family-name-1506" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-1506-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="married-1509">
Nom d'usage
<span class="fr-hint-text">Ancien nom…</span>
</label>
<input class="fr-input" aria-describedby="married-1509-messages" name="married-name" id="married-1509" spellcheck="false" type="text">
<div class="fr-messages-group" id="married-1509-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-1512" disabled aria-labelledby="firstname-fieldset-1512-legend firstname-fieldset-1512-messages">
<legend class="fr-sr-only" id="firstname-fieldset-1512-legend">
Prénom(s)
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="given-1511">
Prénom
</label>
<input class="fr-input" autocomplete="given-name" aria-describedby="given-1511-messages" name="given-name" id="given-1511" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-1511-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-fieldset-1512-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-1512');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-1513" type="checkbox" aria-describedby="disabler-1513-messages">
<label class="fr-label" for="disabler-1513">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-1513-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="married-and-firstname-disabled-1504-messages" aria-live="assertive">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="button-1525" aria-labelledby="button-1525-legend button-1525-messages">
<legend class="fr-sr-only" id="button-1525-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="family-name-1527">
Nom
</label>
<input class="fr-input" autocomplete="family-name" aria-describedby="family-name-1527-messages" name="family-name" id="family-name-1527" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-1527-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-1533" aria-labelledby="firstname-fieldset-1533-legend firstname-fieldset-1533-messages">
<legend class="fr-sr-only" id="firstname-fieldset-1533-legend">
Prénom(s)
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="given-1532">
Prénom
</label>
<input class="fr-input" autocomplete="given-name" aria-describedby="given-1532-messages" name="given-name" id="given-1532" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-1532-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-1532'));
const reference = getFieldsetElement(this);
const copy = firstname.cloneNode(true);
copy.innerHTML = copy.innerHTML.replace(/given-1532/g, `given-1532-added-${this.firstnamesCount}`).replace('name="firstname"', `name="firstname-${this.firstnamesCount}"`);
const container = reference.parentNode;
container.insertBefore(copy, reference);
" type="button">
Ajouter un prénom
</button>
</div>
<div class="fr-messages-group" id="firstname-fieldset-1533-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-1533');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" name="firstname-disabled" id="disabler-1534" type="checkbox" aria-describedby="disabler-1534-messages">
<label class="fr-label" for="disabler-1534">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-1534-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="button-1525-messages" aria-live="assertive">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="button-and-firstname-disabled-1546" aria-labelledby="button-and-firstname-disabled-1546-legend button-and-firstname-disabled-1546-messages">
<legend class="fr-sr-only" id="button-and-firstname-disabled-1546-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="family-name-1548">
Nom
</label>
<input class="fr-input" autocomplete="family-name" aria-describedby="family-name-1548-messages" name="family-name" id="family-name-1548" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-1548-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-1554" disabled aria-labelledby="firstname-fieldset-1554-legend firstname-fieldset-1554-messages">
<legend class="fr-sr-only" id="firstname-fieldset-1554-legend">
Prénom(s)
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="given-1553">
Prénom
</label>
<input class="fr-input" autocomplete="given-name" aria-describedby="given-1553-messages" name="given-name" id="given-1553" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-1553-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-1553'));
const reference = getFieldsetElement(this);
const copy = firstname.cloneNode(true);
copy.innerHTML = copy.innerHTML.replace(/given-1553/g, `given-1553-added-${this.firstnamesCount}`).replace('name="firstname"', `name="firstname-${this.firstnamesCount}"`);
const container = reference.parentNode;
container.insertBefore(copy, reference);
" type="button">
Ajouter un prénom
</button>
</div>
<div class="fr-messages-group" id="firstname-fieldset-1554-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-1554');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-1555" type="checkbox" aria-describedby="disabler-1555-messages">
<label class="fr-label" for="disabler-1555">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-1555-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="button-and-firstname-disabled-1546-messages" aria-live="assertive">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="name-international-1567" aria-labelledby="name-international-1567-legend name-international-1567-messages">
<legend class="fr-sr-only" id="name-international-1567-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-select-group">
<label class="fr-label" for="country-1568">
Pays
</label>
<select class="fr-select" aria-describedby="country-1568-messages" id="country-1568" 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-1568-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="family-name-1569">
Nom
</label>
<input class="fr-input" autocomplete="family-name" aria-describedby="family-name-1569-messages" name="family-name" id="family-name-1569" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-1569-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-1575" aria-labelledby="firstname-fieldset-1575-legend firstname-fieldset-1575-messages">
<legend class="fr-sr-only" id="firstname-fieldset-1575-legend">
Prénom(s)
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="given-1574">
Prénom
</label>
<input class="fr-input" autocomplete="given-name" aria-describedby="given-1574-messages" name="given-name" id="given-1574" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-1574-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-fieldset-1575-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-1575');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" name="firstname-disabled" id="disabler-1576" type="checkbox" aria-describedby="disabler-1576-messages">
<label class="fr-label" for="disabler-1576">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-1576-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="name-international-1567-messages" aria-live="assertive">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="name-international-1588" aria-labelledby="name-international-1588-legend name-international-1588-messages">
<legend class="fr-sr-only" id="name-international-1588-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-select-group">
<label class="fr-label" for="country-1589">
Pays
</label>
<select class="fr-select" aria-describedby="country-1589-messages" id="country-1589" 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-1589-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="family-name-1590">
Nom
</label>
<input class="fr-input" autocomplete="family-name" aria-describedby="family-name-1590-messages" name="family-name" id="family-name-1590" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-1590-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-1596" disabled aria-labelledby="firstname-fieldset-1596-legend firstname-fieldset-1596-messages">
<legend class="fr-sr-only" id="firstname-fieldset-1596-legend">
Prénom(s)
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group">
<label class="fr-label" for="given-1595">
Prénom
</label>
<input class="fr-input" autocomplete="given-name" aria-describedby="given-1595-messages" name="given-name" id="given-1595" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-1595-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-fieldset-1596-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-1596');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-1597" type="checkbox" aria-describedby="disabler-1597-messages">
<label class="fr-label" for="disabler-1597">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-1597-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="name-international-1588-messages" aria-live="assertive">
</div>
</fieldset>