DSFR v1.14.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-7404" aria-labelledby="firstname-disabled-7404-legend firstname-disabled-7404-messages">
<legend class="fr-sr-only" id="firstname-disabled-7404-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7412">
<label class="fr-label" for="family-name-7406">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-7406-messages" name="family-name" autocomplete="family-name" id="family-name-7406" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-7406-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7413">
<label class="fr-label" for="given-7411">
Prénom
</label>
<input class="fr-input" aria-describedby="given-7411-messages" name="given-name" autocomplete="given-name" id="given-7411" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-7411-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-disabled-7404-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="firstname-disabled-7427" aria-labelledby="firstname-disabled-7427-legend firstname-disabled-7427-messages">
<legend class="fr-sr-only" id="firstname-disabled-7427-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7437">
<label class="fr-label" for="family-name-7429">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-7429-messages" name="family-name" autocomplete="family-name" id="family-name-7429" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-7429-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7435" disabled aria-labelledby="firstname-fieldset-7435-legend firstname-fieldset-7435-messages">
<legend class="fr-sr-only" id="firstname-fieldset-7435-legend">
Prénom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7438">
<label class="fr-label" for="given-7434">
Prénom
</label>
<input class="fr-input" aria-describedby="given-7434-messages" name="given-name" autocomplete="given-name" id="given-7434" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-7434-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-fieldset-7435-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-7435')" checked name="firstname-disabled" id="disabler-7436" type="checkbox" aria-describedby="disabler-7436-messages">
<label class="fr-label" for="disabler-7436">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-7436-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-disabled-7427-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="married-name-7451" aria-labelledby="married-name-7451-legend married-name-7451-messages">
<legend class="fr-sr-only" id="married-name-7451-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7459">
<label class="fr-label" for="family-name-7453">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-7453-messages" name="family-name" autocomplete="family-name" id="family-name-7453" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-7453-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7460">
<label class="fr-label" for="married-7456">
Nom d'usage
<span class="fr-hint-text">Indication : ancien nom…</span>
</label>
<input class="fr-input" aria-describedby="married-7456-messages" name="married-name" autocomplete="family-name" id="married-7456" spellcheck="false" type="text">
<div class="fr-messages-group" id="married-7456-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7461">
<label class="fr-label" for="given-7458">
Prénom
</label>
<input class="fr-input" aria-describedby="given-7458-messages" name="given-name" autocomplete="given-name" id="given-7458" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-7458-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="married-name-7451-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="married-and-firstname-disabled-7476" aria-labelledby="married-and-firstname-disabled-7476-legend married-and-firstname-disabled-7476-messages">
<legend class="fr-sr-only" id="married-and-firstname-disabled-7476-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7486">
<label class="fr-label" for="family-name-7478">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-7478-messages" name="family-name" autocomplete="family-name" id="family-name-7478" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-7478-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7487">
<label class="fr-label" for="married-7481">
Nom d'usage
<span class="fr-hint-text">Indication : ancien nom…</span>
</label>
<input class="fr-input" aria-describedby="married-7481-messages" name="married-name" autocomplete="family-name" id="married-7481" spellcheck="false" type="text">
<div class="fr-messages-group" id="married-7481-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7484" disabled aria-labelledby="firstname-fieldset-7484-legend firstname-fieldset-7484-messages">
<legend class="fr-sr-only" id="firstname-fieldset-7484-legend">
Prénom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7488">
<label class="fr-label" for="given-7483">
Prénom
</label>
<input class="fr-input" aria-describedby="given-7483-messages" name="given-name" autocomplete="given-name" id="given-7483" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-7483-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-fieldset-7484-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-7484')" checked name="firstname-disabled" id="disabler-7485" type="checkbox" aria-describedby="disabler-7485-messages">
<label class="fr-label" for="disabler-7485">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-7485-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="married-and-firstname-disabled-7476-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="button-7502" aria-labelledby="button-7502-legend button-7502-messages">
<legend class="fr-sr-only" id="button-7502-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7512">
<label class="fr-label" for="family-name-7504">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-7504-messages" name="family-name" autocomplete="family-name" id="family-name-7504" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-7504-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7510" aria-labelledby="firstname-fieldset-7510-legend firstname-fieldset-7510-messages">
<legend class="fr-sr-only" id="firstname-fieldset-7510-legend">
Prénom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7513">
<label class="fr-label" for="given-7509">
Prénom
</label>
<input class="fr-input" aria-describedby="given-7509-messages" name="given-name" autocomplete="given-name" id="given-7509" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-7509-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<button onclick="addFirstname(this, 'given-7509')" type="button" 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-7510-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-7510')" name="firstname-disabled" id="disabler-7511" type="checkbox" aria-describedby="disabler-7511-messages">
<label class="fr-label" for="disabler-7511">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-7511-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="button-7502-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="button-and-firstname-disabled-7527" aria-labelledby="button-and-firstname-disabled-7527-legend button-and-firstname-disabled-7527-messages">
<legend class="fr-sr-only" id="button-and-firstname-disabled-7527-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7537">
<label class="fr-label" for="family-name-7529">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-7529-messages" name="family-name" autocomplete="family-name" id="family-name-7529" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-7529-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7535" disabled aria-labelledby="firstname-fieldset-7535-legend firstname-fieldset-7535-messages">
<legend class="fr-sr-only" id="firstname-fieldset-7535-legend">
Prénom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7538">
<label class="fr-label" for="given-7534">
Prénom
</label>
<input class="fr-input" aria-describedby="given-7534-messages" name="given-name" autocomplete="given-name" id="given-7534" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-7534-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<button onclick="addFirstname(this, 'given-7534')" type="button" 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-7535-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-7535')" checked name="firstname-disabled" id="disabler-7536" type="checkbox" aria-describedby="disabler-7536-messages">
<label class="fr-label" for="disabler-7536">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-7536-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="button-and-firstname-disabled-7527-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="name-international-7552" aria-labelledby="name-international-7552-legend name-international-7552-messages">
<legend class="fr-sr-only" id="name-international-7552-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-select-group">
<label class="fr-label" for="country-7553">
Pays
</label>
<select class="fr-select" aria-describedby="country-7553-messages" id="country-7553" name="country">
<option value="" selected disabled>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-7553-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7562">
<label class="fr-label" for="family-name-7554">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-7554-messages" name="family-name" autocomplete="family-name" id="family-name-7554" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-7554-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7560" aria-labelledby="firstname-fieldset-7560-legend firstname-fieldset-7560-messages">
<legend class="fr-sr-only" id="firstname-fieldset-7560-legend">
Prénom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7563">
<label class="fr-label" for="given-7559">
Prénom
</label>
<input class="fr-input" aria-describedby="given-7559-messages" name="given-name" autocomplete="given-name" id="given-7559" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-7559-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-fieldset-7560-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-7560')" name="firstname-disabled" id="disabler-7561" type="checkbox" aria-describedby="disabler-7561-messages">
<label class="fr-label" for="disabler-7561">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-7561-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="name-international-7552-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="name-international-7577" aria-labelledby="name-international-7577-legend name-international-7577-messages">
<legend class="fr-sr-only" id="name-international-7577-legend">
Nom
</legend>
<div class="fr-fieldset__element">
<div class="fr-select-group">
<label class="fr-label" for="country-7578">
Pays
</label>
<select class="fr-select" aria-describedby="country-7578-messages" id="country-7578" name="country">
<option value="" selected disabled>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-7578-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7587">
<label class="fr-label" for="family-name-7579">
Nom
</label>
<input class="fr-input" aria-describedby="family-name-7579-messages" name="family-name" autocomplete="family-name" id="family-name-7579" spellcheck="false" type="text">
<div class="fr-messages-group" id="family-name-7579-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-7585" disabled aria-labelledby="firstname-fieldset-7585-legend firstname-fieldset-7585-messages">
<legend class="fr-sr-only" id="firstname-fieldset-7585-legend">
Prénom
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7588">
<label class="fr-label" for="given-7584">
Prénom
</label>
<input class="fr-input" aria-describedby="given-7584-messages" name="given-name" autocomplete="given-name" id="given-7584" spellcheck="false" type="text">
<div class="fr-messages-group" id="given-7584-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="firstname-fieldset-7585-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-7585')" checked name="firstname-disabled" id="disabler-7586" type="checkbox" aria-describedby="disabler-7586-messages">
<label class="fr-label" for="disabler-7586">
Je n'ai pas de prénom
</label>
<div class="fr-messages-group" id="disabler-7586-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="name-international-7577-messages" aria-live="polite">
</div>
</fieldset>