DSFR v1.14.1

Retour

Bloc fonctionnel 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.

Documentation

Demande d’un nom et d’un prénom en France

Défaut

Nom

<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>

Avec prénom désactivé

Nom
Prénom

<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>

Avec nom d'usage

Nom

<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>

Avec nom d'usage + prénom désactivé

Nom
Prénom

<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>

Avec bouton

Nom
Prénom

<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>

Avec bouton + prénom désactivé

Nom
Prénom

<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>

Demande d’un nom et d’un prénom à l’international

Défaut

Nom
Prénom

<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>

Avec prénom désactivé

Nom
Prénom

<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>

Paramètres d’affichage

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