DSFR v1.12.1
La demande de nom et prénom permet d’aider un utilisateur à saisir son nom et son prénom.
Documentation<fieldset class="fr-fieldset" id="firstname-disabled-769" aria-labelledby="firstname-disabled-769-legend firstname-disabled-769-messages">
<legend class="fr-sr-only" id="firstname-disabled-769-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-777">
<label class="fr-label" for="family-name-771">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-771-messages" name="family-name" autocomplete="family-name" id="family-name-771" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-771-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-778">
<label class="fr-label" for="given-776">
Prénom
</label>
<input class="fr-input" aria-describedby="given-776-messages" name="given-name" autocomplete="given-name" id="given-776" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-776-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-disabled-769-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="firstname-disabled-792" aria-labelledby="firstname-disabled-792-legend firstname-disabled-792-messages">
<legend class="fr-sr-only" id="firstname-disabled-792-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-802">
<label class="fr-label" for="family-name-794">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-794-messages" name="family-name" autocomplete="family-name" id="family-name-794" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-794-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-800" disabled aria-labelledby="firstname-fieldset-800-legend firstname-fieldset-800-messages">
<legend class="fr-sr-only" id="firstname-fieldset-800-legend">
Prénom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-803">
<label class="fr-label" for="given-799">
Prénom
</label>
<input class="fr-input" aria-describedby="given-799-messages" name="given-name" autocomplete="given-name" id="given-799" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-799-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-fieldset-800-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-800')" checked name="firstname-disabled" id="disabler-801" type="checkbox" aria-describedby="disabler-801-messages">
<label class="fr-label" for="disabler-801">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-801-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-disabled-792-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="married-name-816" aria-labelledby="married-name-816-legend married-name-816-messages">
<legend class="fr-sr-only" id="married-name-816-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-824">
<label class="fr-label" for="family-name-818">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-818-messages" name="family-name" autocomplete="family-name" id="family-name-818" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-818-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-825">
<label class="fr-label" for="married-821">
Nom d'usage
<span class="fr-hint-text">Indication : ancien nom…</span>
</label>
<input class="fr-input" aria-describedby="married-821-messages" name="married-name" autocomplete="family-name" id="married-821" spellcheck="false" type="text">
<div class="fr-messages-group" id="married-821-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-826">
<label class="fr-label" for="given-823">
Prénom
</label>
<input class="fr-input" aria-describedby="given-823-messages" name="given-name" autocomplete="given-name" id="given-823" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-823-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="married-name-816-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="married-and-firstname-disabled-841" aria-labelledby="married-and-firstname-disabled-841-legend married-and-firstname-disabled-841-messages">
<legend class="fr-sr-only" id="married-and-firstname-disabled-841-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-851">
<label class="fr-label" for="family-name-843">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-843-messages" name="family-name" autocomplete="family-name" id="family-name-843" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-843-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-852">
<label class="fr-label" for="married-846">
Nom d'usage
<span class="fr-hint-text">Indication : ancien nom…</span>
</label>
<input class="fr-input" aria-describedby="married-846-messages" name="married-name" autocomplete="family-name" id="married-846" spellcheck="false" type="text">
<div class="fr-messages-group" id="married-846-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-849" disabled aria-labelledby="firstname-fieldset-849-legend firstname-fieldset-849-messages">
<legend class="fr-sr-only" id="firstname-fieldset-849-legend">
Prénom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-853">
<label class="fr-label" for="given-848">
Prénom
</label>
<input class="fr-input" aria-describedby="given-848-messages" name="given-name" autocomplete="given-name" id="given-848" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-848-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-fieldset-849-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-849')" checked name="firstname-disabled" id="disabler-850" type="checkbox" aria-describedby="disabler-850-messages">
<label class="fr-label" for="disabler-850">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-850-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="married-and-firstname-disabled-841-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="button-868" aria-labelledby="button-868-legend button-868-messages">
<legend class="fr-sr-only" id="button-868-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-878">
<label class="fr-label" for="family-name-870">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-870-messages" name="family-name" autocomplete="family-name" id="family-name-870" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-870-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-876" aria-labelledby="firstname-fieldset-876-legend firstname-fieldset-876-messages">
<legend class="fr-sr-only" id="firstname-fieldset-876-legend">
Prénom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-879">
<label class="fr-label" for="given-875">
Prénom
</label>
<input class="fr-input" aria-describedby="given-875-messages" name="given-name" autocomplete="given-name" id="given-875" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-875-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<button onclick="addFirstname(this, 'given-875')" type="button" id="button-880" class="fr-btn fr-btn--sm fr-icon-add-line fr-btn--icon-left fr-btn--secondary">Ajouter un prénom</button>
</div>
<div class="fr-messages-group" id="firstname-fieldset-876-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-876')" name="firstname-disabled" id="disabler-877" type="checkbox" aria-describedby="disabler-877-messages">
<label class="fr-label" for="disabler-877">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-877-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="button-868-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="button-and-firstname-disabled-895" aria-labelledby="button-and-firstname-disabled-895-legend button-and-firstname-disabled-895-messages">
<legend class="fr-sr-only" id="button-and-firstname-disabled-895-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-905">
<label class="fr-label" for="family-name-897">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-897-messages" name="family-name" autocomplete="family-name" id="family-name-897" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-897-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-903" disabled aria-labelledby="firstname-fieldset-903-legend firstname-fieldset-903-messages">
<legend class="fr-sr-only" id="firstname-fieldset-903-legend">
Prénom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-906">
<label class="fr-label" for="given-902">
Prénom
</label>
<input class="fr-input" aria-describedby="given-902-messages" name="given-name" autocomplete="given-name" id="given-902" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-902-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<button onclick="addFirstname(this, 'given-902')" type="button" id="button-907" class="fr-btn fr-btn--sm fr-icon-add-line fr-btn--icon-left fr-btn--secondary">Ajouter un prénom</button>
</div>
<div class="fr-messages-group" id="firstname-fieldset-903-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-903')" checked name="firstname-disabled" id="disabler-904" type="checkbox" aria-describedby="disabler-904-messages">
<label class="fr-label" for="disabler-904">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-904-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="button-and-firstname-disabled-895-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="name-international-921" aria-labelledby="name-international-921-legend name-international-921-messages">
<legend class="fr-sr-only" id="name-international-921-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-select-group">
<label class="fr-label" for="country-922">
Pays
</label>
<select class="fr-select" aria-describedby="country-922-messages" id="country-922" 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-922-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-931">
<label class="fr-label" for="family-name-923">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-923-messages" name="family-name" autocomplete="family-name" id="family-name-923" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-923-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-929" aria-labelledby="firstname-fieldset-929-legend firstname-fieldset-929-messages">
<legend class="fr-sr-only" id="firstname-fieldset-929-legend">
Prénom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-932">
<label class="fr-label" for="given-928">
Prénom
</label>
<input class="fr-input" aria-describedby="given-928-messages" name="given-name" autocomplete="given-name" id="given-928" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-928-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-fieldset-929-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-929')" name="firstname-disabled" id="disabler-930" type="checkbox" aria-describedby="disabler-930-messages">
<label class="fr-label" for="disabler-930">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-930-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="name-international-921-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="name-international-946" aria-labelledby="name-international-946-legend name-international-946-messages">
<legend class="fr-sr-only" id="name-international-946-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-select-group">
<label class="fr-label" for="country-947">
Pays
</label>
<select class="fr-select" aria-describedby="country-947-messages" id="country-947" 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-947-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-956">
<label class="fr-label" for="family-name-948">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-948-messages" name="family-name" autocomplete="family-name" id="family-name-948" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-948-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-954" disabled aria-labelledby="firstname-fieldset-954-legend firstname-fieldset-954-messages">
<legend class="fr-sr-only" id="firstname-fieldset-954-legend">
Prénom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-957">
<label class="fr-label" for="given-953">
Prénom
</label>
<input class="fr-input" aria-describedby="given-953-messages" name="given-name" autocomplete="given-name" id="given-953" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-953-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-fieldset-954-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-954')" checked name="firstname-disabled" id="disabler-955" type="checkbox" aria-describedby="disabler-955-messages">
<label class="fr-label" for="disabler-955">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-955-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="name-international-946-messages" aria-live="polite">
</div>
</fieldset>