DSFR v1.12.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-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>

Avec prénom désactivé

Nom
Prénom

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

Avec nom d'usage

Nom

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

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

Nom
Prénom

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

Avec bouton

Nom
Prénom

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

Avec bouton + prénom désactivé

Nom
Prénom

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

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

Défaut

Nom
Prénom

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

Avec prénom désactivé

Nom
Prénom

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

Paramètres d’affichage

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