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-786" aria-labelledby="firstname-disabled-786-legend firstname-disabled-786-messages">
<legend class="fr-sr-only" id="firstname-disabled-786-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-794">
<label class="fr-label" for="family-name-788">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-788-messages" name="family-name" autocomplete="family-name" id="family-name-788" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-788-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-795">
<label class="fr-label" for="given-793">
Prénom
</label>
<input class="fr-input" aria-describedby="given-793-messages" name="given-name" autocomplete="given-name" id="given-793" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-793-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-disabled-786-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="firstname-disabled-809" aria-labelledby="firstname-disabled-809-legend firstname-disabled-809-messages">
<legend class="fr-sr-only" id="firstname-disabled-809-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-819">
<label class="fr-label" for="family-name-811">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-811-messages" name="family-name" autocomplete="family-name" id="family-name-811" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-811-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-817" disabled aria-labelledby="firstname-fieldset-817-legend firstname-fieldset-817-messages">
<legend class="fr-sr-only" id="firstname-fieldset-817-legend">
Prénom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-820">
<label class="fr-label" for="given-816">
Prénom
</label>
<input class="fr-input" aria-describedby="given-816-messages" name="given-name" autocomplete="given-name" id="given-816" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-816-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-fieldset-817-messages" aria-live="polite">
</div>
</fieldset>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input onclick="toggleDisabled(this, 'firstname-fieldset-817')" checked name="firstname-disabled" id="disabler-818" type="checkbox" aria-describedby="disabler-818-messages">
<label class="fr-label" for="disabler-818">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-818-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-disabled-809-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="married-name-833" aria-labelledby="married-name-833-legend married-name-833-messages">
<legend class="fr-sr-only" id="married-name-833-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-841">
<label class="fr-label" for="family-name-835">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-835-messages" name="family-name" autocomplete="family-name" id="family-name-835" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-835-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-842">
<label class="fr-label" for="married-838">
Nom d'usage
<span class="fr-hint-text">Indication : ancien nom…</span>
</label>
<input class="fr-input" aria-describedby="married-838-messages" name="married-name" autocomplete="family-name" id="married-838" spellcheck="false" type="text">
<div class="fr-messages-group" id="married-838-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-843">
<label class="fr-label" for="given-840">
Prénom
</label>
<input class="fr-input" aria-describedby="given-840-messages" name="given-name" autocomplete="given-name" id="given-840" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-840-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="married-name-833-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="married-and-firstname-disabled-858" aria-labelledby="married-and-firstname-disabled-858-legend married-and-firstname-disabled-858-messages">
<legend class="fr-sr-only" id="married-and-firstname-disabled-858-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-868">
<label class="fr-label" for="family-name-860">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-860-messages" name="family-name" autocomplete="family-name" id="family-name-860" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-860-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-869">
<label class="fr-label" for="married-863">
Nom d'usage
<span class="fr-hint-text">Indication : ancien nom…</span>
</label>
<input class="fr-input" aria-describedby="married-863-messages" name="married-name" autocomplete="family-name" id="married-863" spellcheck="false" type="text">
<div class="fr-messages-group" id="married-863-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-866" disabled aria-labelledby="firstname-fieldset-866-legend firstname-fieldset-866-messages">
<legend class="fr-sr-only" id="firstname-fieldset-866-legend">
Prénom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-870">
<label class="fr-label" for="given-865">
Prénom
</label>
<input class="fr-input" aria-describedby="given-865-messages" name="given-name" autocomplete="given-name" id="given-865" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-865-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-fieldset-866-messages" aria-live="polite">
</div>
</fieldset>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input onclick="toggleDisabled(this, 'firstname-fieldset-866')" checked name="firstname-disabled" id="disabler-867" type="checkbox" aria-describedby="disabler-867-messages">
<label class="fr-label" for="disabler-867">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-867-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="married-and-firstname-disabled-858-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="button-885" aria-labelledby="button-885-legend button-885-messages">
<legend class="fr-sr-only" id="button-885-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-895">
<label class="fr-label" for="family-name-887">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-887-messages" name="family-name" autocomplete="family-name" id="family-name-887" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-887-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-893" aria-labelledby="firstname-fieldset-893-legend firstname-fieldset-893-messages">
<legend class="fr-sr-only" id="firstname-fieldset-893-legend">
Prénom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-896">
<label class="fr-label" for="given-892">
Prénom
</label>
<input class="fr-input" aria-describedby="given-892-messages" name="given-name" autocomplete="given-name" id="given-892" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-892-messages" aria-live="polite">
</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="addFirstname(this, 'given-892')" type="button" id="button-897">
Ajouter un prénom
</button>
</div>
<div class="fr-messages-group" id="firstname-fieldset-893-messages" aria-live="polite">
</div>
</fieldset>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input onclick="toggleDisabled(this, 'firstname-fieldset-893')" name="firstname-disabled" id="disabler-894" type="checkbox" aria-describedby="disabler-894-messages">
<label class="fr-label" for="disabler-894">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-894-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="button-885-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="button-and-firstname-disabled-912" aria-labelledby="button-and-firstname-disabled-912-legend button-and-firstname-disabled-912-messages">
<legend class="fr-sr-only" id="button-and-firstname-disabled-912-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-922">
<label class="fr-label" for="family-name-914">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-914-messages" name="family-name" autocomplete="family-name" id="family-name-914" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-914-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-920" disabled aria-labelledby="firstname-fieldset-920-legend firstname-fieldset-920-messages">
<legend class="fr-sr-only" id="firstname-fieldset-920-legend">
Prénom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-923">
<label class="fr-label" for="given-919">
Prénom
</label>
<input class="fr-input" aria-describedby="given-919-messages" name="given-name" autocomplete="given-name" id="given-919" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-919-messages" aria-live="polite">
</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="addFirstname(this, 'given-919')" type="button" id="button-924">
Ajouter un prénom
</button>
</div>
<div class="fr-messages-group" id="firstname-fieldset-920-messages" aria-live="polite">
</div>
</fieldset>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input onclick="toggleDisabled(this, 'firstname-fieldset-920')" checked name="firstname-disabled" id="disabler-921" type="checkbox" aria-describedby="disabler-921-messages">
<label class="fr-label" for="disabler-921">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-921-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="button-and-firstname-disabled-912-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="name-international-938" aria-labelledby="name-international-938-legend name-international-938-messages">
<legend class="fr-sr-only" id="name-international-938-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-select-group">
<label class="fr-label" for="country-939">
Pays
</label>
<select class="fr-select" aria-describedby="country-939-messages" id="country-939" 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-939-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-948">
<label class="fr-label" for="family-name-940">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-940-messages" name="family-name" autocomplete="family-name" id="family-name-940" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-940-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-946" aria-labelledby="firstname-fieldset-946-legend firstname-fieldset-946-messages">
<legend class="fr-sr-only" id="firstname-fieldset-946-legend">
Prénom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-949">
<label class="fr-label" for="given-945">
Prénom
</label>
<input class="fr-input" aria-describedby="given-945-messages" name="given-name" autocomplete="given-name" id="given-945" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-945-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-fieldset-946-messages" aria-live="polite">
</div>
</fieldset>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input onclick="toggleDisabled(this, 'firstname-fieldset-946')" name="firstname-disabled" id="disabler-947" type="checkbox" aria-describedby="disabler-947-messages">
<label class="fr-label" for="disabler-947">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-947-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="name-international-938-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="name-international-963" aria-labelledby="name-international-963-legend name-international-963-messages">
<legend class="fr-sr-only" id="name-international-963-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-select-group">
<label class="fr-label" for="country-964">
Pays
</label>
<select class="fr-select" aria-describedby="country-964-messages" id="country-964" 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-964-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-973">
<label class="fr-label" for="family-name-965">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-965-messages" name="family-name" autocomplete="family-name" id="family-name-965" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-965-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-971" disabled aria-labelledby="firstname-fieldset-971-legend firstname-fieldset-971-messages">
<legend class="fr-sr-only" id="firstname-fieldset-971-legend">
Prénom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-974">
<label class="fr-label" for="given-970">
Prénom
</label>
<input class="fr-input" aria-describedby="given-970-messages" name="given-name" autocomplete="given-name" id="given-970" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-970-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-fieldset-971-messages" aria-live="polite">
</div>
</fieldset>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input onclick="toggleDisabled(this, 'firstname-fieldset-971')" checked name="firstname-disabled" id="disabler-972" type="checkbox" aria-describedby="disabler-972-messages">
<label class="fr-label" for="disabler-972">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-972-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="name-international-963-messages" aria-live="polite">
</div>
</fieldset>