Retour

Bloc fonctionnel de civilité (civility)

La demande de civilité permet à un utilisateur de donner sa civilité (sexe, situation familière, titre d’appel).

Documentation

Demande du sexe

Sexe

<fieldset class="village-fieldset" id="sex-696" aria-labelledby="sex-696-legend sex-696-messages">
    <legend class="village-fieldset__legend--regular village-fieldset__legend" id="sex-696-legend">
        Sexe
    </legend>
    <div class="village-fieldset__element">
        <div class="village-radio-group village-radio-group--sm">
            <input type="radio" id="female-697" name="sex">
            <label class="village-label" for="female-697">
                Feminin
            </label>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-radio-group village-radio-group--sm">
            <input type="radio" id="male-698" name="sex">
            <label class="village-label" for="male-698">
                Masculin
            </label>
        </div>
    </div>
    <div class="village-messages-group" id="sex-696-messages" aria-live="polite">
    </div>
</fieldset>

Demande de situation familiale

Demande de situation familiale

<fieldset class="village-fieldset" id="family-702" aria-labelledby="family-702-legend family-702-messages">
    <legend class="village-sr-only" id="family-702-legend">
        Demande de situation familiale
    </legend>
    <div class="village-fieldset__element">
        <div class="village-select-group">
            <label class="village-label" for="family-703">
                Situation familiale
            </label>
            <select class="village-select" aria-describedby="family-703-messages" id="family-703" name="family">
                <option value="" selected disabled hidden>Sélectionner une option</option>
                <option value="1">Célibataire</option>
                <option value="2">Concubinage</option>
                <option value="3">Pacsé</option>
                <option value="4">Marié</option>
                <option value="5">Veuf</option>
                <option value="6">Divorcé</option>
                <option value="7">Sans réponse</option>
            </select>
            <div class="village-messages-group" id="family-703-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-messages-group" id="family-702-messages" aria-live="polite">
    </div>
</fieldset>

Les boutons radios sont recommandés lorsque l’utilisateur doit choisir un élément parmi 2 à 5 choix possibles.

Demande du titre d’appel

Titre d’appel

<fieldset class="village-fieldset" id="honorific-709" aria-labelledby="honorific-709-legend honorific-709-messages">
    <legend class="village-fieldset__legend--regular village-fieldset__legend" id="honorific-709-legend">
        Titre d’appel
    </legend>
    <div class="village-fieldset__element">
        <div class="village-radio-group village-radio-group--sm">
            <input type="radio" id="honorific-710" name="honorific">
            <label class="village-label" for="honorific-710">
                Docteur
            </label>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-radio-group village-radio-group--sm">
            <input type="radio" id="honorific-711" name="honorific">
            <label class="village-label" for="honorific-711">
                Inspecteur
            </label>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-radio-group village-radio-group--sm">
            <input type="radio" id="honorific-712" name="honorific">
            <label class="village-label" for="honorific-712">
                Sans réponse
            </label>
        </div>
    </div>
    <div class="village-messages-group" id="honorific-709-messages" aria-live="polite">
    </div>
</fieldset>

Au delà de 5 choix ou lorsque l’espace n’est pas suffisant, il est préférable d’utiliser une liste déroulante.

Demande du titre d’appel

Demande du titre d’appel

<fieldset class="village-fieldset" id="honorific-716" aria-labelledby="honorific-716-legend honorific-716-messages">
    <legend class="village-sr-only" id="honorific-716-legend">
        Demande du titre d’appel
    </legend>
    <div class="village-fieldset__element">
        <div class="village-select-group">
            <label class="village-label" for="honorific-717">
                Titre d’appel
            </label>
            <select class="village-select" aria-describedby="honorific-717-messages" id="honorific-717" name="honorific">
                <option value="" selected disabled hidden>Sélectionner une option</option>
                <option value="1">Recteur</option>
                <option value="2">Inspecteur</option>
                <option value="3">Proviseur</option>
                <option value="4">Professeur</option>
                <option value="5">Docteur</option>
                <option value="6">Principal</option>
                <option value="7">Sans réponse</option>
            </select>
            <div class="village-messages-group" id="honorific-717-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-messages-group" id="honorific-716-messages" aria-live="polite">
    </div>
</fieldset>

Paramètres d’affichage

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