DSFR v1.13.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-675" aria-labelledby="firstname-disabled-675-legend firstname-disabled-675-messages">
    <legend class="fr-sr-only" id="firstname-disabled-675-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-683">
            <label class="fr-label" for="family-name-677">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-677-messages" name="family-name" autocomplete="family-name" id="family-name-677" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-677-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-684">
            <label class="fr-label" for="given-682">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-682-messages" name="given-name" autocomplete="given-name" id="given-682" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-682-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="firstname-disabled-675-messages" aria-live="polite">
    </div>
</fieldset>

Avec prénom désactivé

Nom
Prénom

<fieldset class="fr-fieldset" id="firstname-disabled-698" aria-labelledby="firstname-disabled-698-legend firstname-disabled-698-messages">
    <legend class="fr-sr-only" id="firstname-disabled-698-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-708">
            <label class="fr-label" for="family-name-700">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-700-messages" name="family-name" autocomplete="family-name" id="family-name-700" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-700-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-706" disabled aria-labelledby="firstname-fieldset-706-legend firstname-fieldset-706-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-706-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-709">
                    <label class="fr-label" for="given-705">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-705-messages" name="given-name" autocomplete="given-name" id="given-705" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-705-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-706-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-706')" checked name="firstname-disabled" id="disabler-707" type="checkbox" aria-describedby="disabler-707-messages">
            <label class="fr-label" for="disabler-707">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-707-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="firstname-disabled-698-messages" aria-live="polite">
    </div>
</fieldset>

Avec nom d'usage

Nom

<fieldset class="fr-fieldset" id="married-name-722" aria-labelledby="married-name-722-legend married-name-722-messages">
    <legend class="fr-sr-only" id="married-name-722-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-730">
            <label class="fr-label" for="family-name-724">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-724-messages" name="family-name" autocomplete="family-name" id="family-name-724" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-724-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-731">
            <label class="fr-label" for="married-727">
                Nom d'usage
                <span class="fr-hint-text">Indication : ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-727-messages" name="married-name" autocomplete="family-name" id="married-727" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-727-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-732">
            <label class="fr-label" for="given-729">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-729-messages" name="given-name" autocomplete="given-name" id="given-729" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-729-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-name-722-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-747" aria-labelledby="married-and-firstname-disabled-747-legend married-and-firstname-disabled-747-messages">
    <legend class="fr-sr-only" id="married-and-firstname-disabled-747-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-757">
            <label class="fr-label" for="family-name-749">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-749-messages" name="family-name" autocomplete="family-name" id="family-name-749" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-749-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-758">
            <label class="fr-label" for="married-752">
                Nom d'usage
                <span class="fr-hint-text">Indication : ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-752-messages" name="married-name" autocomplete="family-name" id="married-752" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-752-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-755" disabled aria-labelledby="firstname-fieldset-755-legend firstname-fieldset-755-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-755-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-759">
                    <label class="fr-label" for="given-754">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-754-messages" name="given-name" autocomplete="given-name" id="given-754" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-754-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-755-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-755')" checked name="firstname-disabled" id="disabler-756" type="checkbox" aria-describedby="disabler-756-messages">
            <label class="fr-label" for="disabler-756">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-756-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-and-firstname-disabled-747-messages" aria-live="polite">
    </div>
</fieldset>

Avec bouton

Nom
Prénom

<fieldset class="fr-fieldset" id="button-773" aria-labelledby="button-773-legend button-773-messages">
    <legend class="fr-sr-only" id="button-773-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-783">
            <label class="fr-label" for="family-name-775">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-775-messages" name="family-name" autocomplete="family-name" id="family-name-775" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-775-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-781" aria-labelledby="firstname-fieldset-781-legend firstname-fieldset-781-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-781-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-784">
                    <label class="fr-label" for="given-780">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-780-messages" name="given-name" autocomplete="given-name" id="given-780" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-780-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-fieldset__element">
                <button onclick="addFirstname(this, 'given-780')" 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-781-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-781')" name="firstname-disabled" id="disabler-782" type="checkbox" aria-describedby="disabler-782-messages">
            <label class="fr-label" for="disabler-782">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-782-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-773-messages" aria-live="polite">
    </div>
</fieldset>

Avec bouton + prénom désactivé

Nom
Prénom

<fieldset class="fr-fieldset" id="button-and-firstname-disabled-798" aria-labelledby="button-and-firstname-disabled-798-legend button-and-firstname-disabled-798-messages">
    <legend class="fr-sr-only" id="button-and-firstname-disabled-798-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-808">
            <label class="fr-label" for="family-name-800">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-800-messages" name="family-name" autocomplete="family-name" id="family-name-800" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-800-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-806" disabled aria-labelledby="firstname-fieldset-806-legend firstname-fieldset-806-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-806-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-809">
                    <label class="fr-label" for="given-805">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-805-messages" name="given-name" autocomplete="given-name" id="given-805" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-805-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-fieldset__element">
                <button onclick="addFirstname(this, 'given-805')" 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-806-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-806')" checked name="firstname-disabled" id="disabler-807" type="checkbox" aria-describedby="disabler-807-messages">
            <label class="fr-label" for="disabler-807">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-807-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-and-firstname-disabled-798-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-823" aria-labelledby="name-international-823-legend name-international-823-messages">
    <legend class="fr-sr-only" id="name-international-823-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-824">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-824-messages" id="country-824" 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-824-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-833">
            <label class="fr-label" for="family-name-825">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-825-messages" name="family-name" autocomplete="family-name" id="family-name-825" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-825-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-831" aria-labelledby="firstname-fieldset-831-legend firstname-fieldset-831-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-831-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-834">
                    <label class="fr-label" for="given-830">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-830-messages" name="given-name" autocomplete="given-name" id="given-830" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-830-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-831-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-831')" name="firstname-disabled" id="disabler-832" type="checkbox" aria-describedby="disabler-832-messages">
            <label class="fr-label" for="disabler-832">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-832-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-823-messages" aria-live="polite">
    </div>
</fieldset>

Avec prénom désactivé

Nom
Prénom

<fieldset class="fr-fieldset" id="name-international-848" aria-labelledby="name-international-848-legend name-international-848-messages">
    <legend class="fr-sr-only" id="name-international-848-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-849">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-849-messages" id="country-849" 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-849-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-858">
            <label class="fr-label" for="family-name-850">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-850-messages" name="family-name" autocomplete="family-name" id="family-name-850" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-850-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-856" disabled aria-labelledby="firstname-fieldset-856-legend firstname-fieldset-856-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-856-legend">
                Prénom
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group" id="input-group-859">
                    <label class="fr-label" for="given-855">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-855-messages" name="given-name" autocomplete="given-name" id="given-855" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-855-messages" aria-live="polite">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-856-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-856')" checked name="firstname-disabled" id="disabler-857" type="checkbox" aria-describedby="disabler-857-messages">
            <label class="fr-label" for="disabler-857">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-857-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-848-messages" aria-live="polite">
    </div>
</fieldset>

Paramètres d’affichage

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