Retour

Formulaire (form)

Ce package permet de mettre en forme les différents champs d'un formulaire, notamment en ce qui concerne les espacements et texte d'aide et d'erreur.

Ensemble de champs de saisie

Légende pour l’ensemble des éléments 

<fieldset class="village-fieldset" id="text" aria-labelledby="text-legend text-messages">
    <legend class="village-fieldset__legend" id="text-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="village-fieldset__element">
        <div class="village-input-group" id="input-group-4275">
            <label class="village-label" for="text-1">
                Libellé champ de saisie
            </label>
            <input class="village-input" aria-describedby="text-1-messages" name="text" id="text-1" type="text">
            <div class="village-messages-group" id="text-1-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-input-group" id="input-group-4276">
            <label class="village-label" for="text-2">
                Libellé champ de saisie
            </label>
            <input class="village-input" aria-describedby="text-2-messages" name="text" id="text-2" type="text">
            <div class="village-messages-group" id="text-2-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-input-group" id="input-group-4277">
            <label class="village-label" for="text-3">
                Libellé champ de saisie
            </label>
            <input class="village-input" aria-describedby="text-3-messages" name="text" id="text-3" type="text">
            <div class="village-messages-group" id="text-3-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-messages-group" id="text-messages" aria-live="polite">
    </div>
</fieldset>

Ensemble de boutons radio

Légende pour l’ensemble des éléments 

<fieldset class="village-fieldset" id="radio" aria-labelledby="radio-legend radio-messages">
    <legend class="village-fieldset__legend--regular village-fieldset__legend" id="radio-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="village-fieldset__element">
        <div class="village-radio-group">
            <input value="1" type="radio" id="radio-1" name="radio">
            <label class="village-label" for="radio-1">
                Libellé bouton radio
            </label>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-radio-group">
            <input value="2" type="radio" id="radio-2" name="radio">
            <label class="village-label" for="radio-2">
                Libellé bouton radio
            </label>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-radio-group">
            <input value="3" type="radio" id="radio-3" name="radio">
            <label class="village-label" for="radio-3">
                Libellé bouton radio
            </label>
        </div>
    </div>
    <div class="village-messages-group" id="radio-messages" aria-live="polite">
    </div>
</fieldset>

Ensemble de cases à cocher

Légende pour l’ensemble des éléments 

<fieldset class="village-fieldset" id="checkbox" aria-labelledby="checkbox-legend checkbox-messages">
    <legend class="village-fieldset__legend--regular village-fieldset__legend" id="checkbox-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="village-fieldset__element">
        <div class="village-checkbox-group">
            <input name="checkbox-1" id="checkbox-1" type="checkbox" aria-describedby="checkbox-1-messages">
            <label class="village-label" for="checkbox-1">
                Libellé case à cocher
            </label>
            <div class="village-messages-group" id="checkbox-1-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-checkbox-group">
            <input name="checkbox-2" id="checkbox-2" type="checkbox" aria-describedby="checkbox-2-messages">
            <label class="village-label" for="checkbox-2">
                Libellé case à cocher
            </label>
            <div class="village-messages-group" id="checkbox-2-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-checkbox-group">
            <input name="checkbox-3" id="checkbox-3" type="checkbox" aria-describedby="checkbox-3-messages">
            <label class="village-label" for="checkbox-3">
                Libellé case à cocher
            </label>
            <div class="village-messages-group" id="checkbox-3-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-messages-group" id="checkbox-messages" aria-live="polite">
    </div>
</fieldset>

Ensemble de boutons radio, en ligne

Légende pour l’ensemble des éléments 

<fieldset class="village-fieldset" id="radio-inline" aria-labelledby="radio-inline-legend radio-inline-messages">
    <legend class="village-fieldset__legend--regular village-fieldset__legend" id="radio-inline-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="village-fieldset__element village-fieldset__element--inline">
        <div class="village-radio-group">
            <input value="1" type="radio" id="radio-inline-1" name="radio-inline">
            <label class="village-label" for="radio-inline-1">
                Libellé bouton radio
            </label>
        </div>
    </div>
    <div class="village-fieldset__element village-fieldset__element--inline">
        <div class="village-radio-group">
            <input value="2" type="radio" id="radio-inline-2" name="radio-inline">
            <label class="village-label" for="radio-inline-2">
                Libellé bouton radio
            </label>
        </div>
    </div>
    <div class="village-fieldset__element village-fieldset__element--inline">
        <div class="village-radio-group">
            <input value="3" type="radio" id="radio-inline-3" name="radio-inline">
            <label class="village-label" for="radio-inline-3">
                Libellé bouton radio
            </label>
        </div>
    </div>
    <div class="village-messages-group" id="radio-inline-messages" aria-live="polite">
    </div>
</fieldset>

Ensemble de cases à cocher, en ligne

Légende pour l’ensemble des éléments 

<fieldset class="village-fieldset" id="checkbox-inline" aria-labelledby="checkbox-inline-legend checkbox-inline-messages">
    <legend class="village-fieldset__legend--regular village-fieldset__legend" id="checkbox-inline-legend">
        Légende pour l’ensemble des éléments
    </legend>
    <div class="village-fieldset__element village-fieldset__element--inline">
        <div class="village-checkbox-group">
            <input name="checkbox-inline-1" id="checkbox-inline-1" type="checkbox" aria-describedby="checkbox-inline-1-messages">
            <label class="village-label" for="checkbox-inline-1">
                Libellé case à cocher
            </label>
            <div class="village-messages-group" id="checkbox-inline-1-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-fieldset__element village-fieldset__element--inline">
        <div class="village-checkbox-group">
            <input name="checkbox-inline-2" id="checkbox-inline-2" type="checkbox" aria-describedby="checkbox-inline-2-messages">
            <label class="village-label" for="checkbox-inline-2">
                Libellé case à cocher
            </label>
            <div class="village-messages-group" id="checkbox-inline-2-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-fieldset__element village-fieldset__element--inline">
        <div class="village-checkbox-group">
            <input name="checkbox-inline-3" id="checkbox-inline-3" type="checkbox" aria-describedby="checkbox-inline-3-messages">
            <label class="village-label" for="checkbox-inline-3">
                Libellé case à cocher
            </label>
            <div class="village-messages-group" id="checkbox-inline-3-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-messages-group" id="checkbox-inline-messages" aria-live="polite">
    </div>
</fieldset>

Ensemble de boutons radio avec erreur

Légende pour l’ensemble des éléments Texte de description additionnel

Texte d’erreur obligatoire

<fieldset class="village-fieldset village-fieldset--error" id="radio-error" role="group" aria-labelledby="radio-error-legend radio-error-messages">
    <legend class="village-fieldset__legend--regular village-fieldset__legend" id="radio-error-legend">
        Légende pour l’ensemble des éléments
        <span class="village-hint-text">Texte de description additionnel</span>
    </legend>
    <div class="village-fieldset__element">
        <div class="village-radio-group">
            <input value="1" type="radio" id="radio-error-1" name="radio-error">
            <label class="village-label" for="radio-error-1">
                Libellé bouton radio
            </label>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-radio-group">
            <input value="2" type="radio" id="radio-error-2" name="radio-error">
            <label class="village-label" for="radio-error-2">
                Libellé bouton radio
            </label>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-radio-group">
            <input value="3" type="radio" id="radio-error-3" name="radio-error">
            <label class="village-label" for="radio-error-3">
                Libellé bouton radio
            </label>
        </div>
    </div>
    <div class="village-messages-group" id="radio-error-messages" aria-live="polite">
        <p class="village-message village-message--error" id="radio-error-message-error">Texte d’erreur obligatoire</p>
    </div>
</fieldset>

Ensemble de boutons radio riches

Légende pour l’ensemble des éléments Texte de description additionnel 

<fieldset class="village-fieldset" id="radio-disabled" aria-labelledby="radio-disabled-legend radio-disabled-messages">
    <legend class="village-fieldset__legend--regular village-fieldset__legend" id="radio-disabled-legend">
        Légende pour l’ensemble des éléments
        <span class="village-hint-text">Texte de description additionnel</span>
    </legend>
    <div class="village-fieldset__element">
        <div class="village-radio-group village-radio-rich">
            <input value="1" type="radio" id="radio-disabled-1" name="radio-disabled">
            <label class="village-label" for="radio-disabled-1">
                Libellé bouton radio
                <span class="village-hint-text">Texte de description additionnel</span>
            </label>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-radio-group village-radio-rich">
            <input value="2" type="radio" id="radio-disabled-2" name="radio-disabled">
            <label class="village-label" for="radio-disabled-2">
                Libellé bouton radio
                <span class="village-hint-text">Texte de description additionnel</span>
            </label>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-radio-group village-radio-rich">
            <input value="3" type="radio" id="radio-disabled-3" name="radio-disabled">
            <label class="village-label" for="radio-disabled-3">
                Libellé bouton radio
                <span class="village-hint-text">Texte de description additionnel</span>
            </label>
        </div>
    </div>
    <div class="village-messages-group" id="radio-disabled-messages" aria-live="polite">
    </div>
</fieldset>

Ensemble de cases à cocher, avec erreur

Légende pour l’ensemble des éléments Texte de description additionnel

Texte d’erreur obligatoire

<fieldset class="village-fieldset village-fieldset--error" id="checkbox-error" role="group" aria-labelledby="checkbox-error-legend checkbox-error-messages">
    <legend class="village-fieldset__legend--regular village-fieldset__legend" id="checkbox-error-legend">
        Légende pour l’ensemble des éléments
        <span class="village-hint-text">Texte de description additionnel</span>
    </legend>
    <div class="village-fieldset__element">
        <div class="village-checkbox-group">
            <input name="checkbox-error-1" id="checkbox-error-1" type="checkbox" aria-describedby="checkbox-error-1-messages">
            <label class="village-label" for="checkbox-error-1">
                Libellé case à cocher
            </label>
            <div class="village-messages-group" id="checkbox-error-1-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-checkbox-group">
            <input name="checkbox-error-2" id="checkbox-error-2" type="checkbox" aria-describedby="checkbox-error-2-messages">
            <label class="village-label" for="checkbox-error-2">
                Libellé case à cocher
            </label>
            <div class="village-messages-group" id="checkbox-error-2-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-checkbox-group">
            <input name="checkbox-error-3" id="checkbox-error-3" type="checkbox" aria-describedby="checkbox-error-3-messages">
            <label class="village-label" for="checkbox-error-3">
                Libellé case à cocher
            </label>
            <div class="village-messages-group" id="checkbox-error-3-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-messages-group" id="checkbox-error-messages" aria-live="polite">
        <p class="village-message village-message--error" id="checkbox-error-message-error">Texte d’erreur obligatoire</p>
    </div>
</fieldset>

Ensemble de champs de saisie désactivés

Légende pour l’ensemble des éléments Texte de description additionnel 

<fieldset class="village-fieldset" id="text-disabled" disabled aria-labelledby="text-disabled-legend text-disabled-messages">
    <legend class="village-fieldset__legend" id="text-disabled-legend">
        Légende pour l’ensemble des éléments
        <span class="village-hint-text">Texte de description additionnel</span>
    </legend>
    <div class="village-fieldset__element">
        <div class="village-input-group" id="input-group-4289">
            <label class="village-label" for="text-disabled-1">
                Libellé champ de saisie
                <span class="village-hint-text">Texte de description additionnel</span>
            </label>
            <input class="village-input" aria-describedby="text-disabled-1-messages" name="text-disabled" id="text-disabled-1" type="text">
            <div class="village-messages-group" id="text-disabled-1-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-input-group" id="input-group-4290">
            <label class="village-label" for="text-disabled-2">
                Libellé champ de saisie
                <span class="village-hint-text">Texte de description additionnel</span>
            </label>
            <input class="village-input" aria-describedby="text-disabled-2-messages" name="text-disabled" id="text-disabled-2" type="text">
            <div class="village-messages-group" id="text-disabled-2-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-input-group" id="input-group-4291">
            <label class="village-label" for="text-disabled-3">
                Libellé champ de saisie
                <span class="village-hint-text">Texte de description additionnel</span>
            </label>
            <input class="village-input" aria-describedby="text-disabled-3-messages" name="text-disabled" id="text-disabled-3" type="text">
            <div class="village-messages-group" id="text-disabled-3-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-messages-group" id="text-disabled-messages" aria-live="polite">
    </div>
</fieldset>

Ensemble de boutons radio désactivés

Légende pour l’ensemble des éléments Texte de description additionnel 

<fieldset class="village-fieldset" id="radio-disabled" disabled aria-labelledby="radio-disabled-legend radio-disabled-messages">
    <legend class="village-fieldset__legend--regular village-fieldset__legend" id="radio-disabled-legend">
        Légende pour l’ensemble des éléments
        <span class="village-hint-text">Texte de description additionnel</span>
    </legend>
    <div class="village-fieldset__element">
        <div class="village-radio-group">
            <input value="1" type="radio" id="radio-disabled-1" name="radio-disabled">
            <label class="village-label" for="radio-disabled-1">
                Libellé bouton radio
                <span class="village-hint-text">Texte de description additionnel</span>
            </label>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-radio-group">
            <input value="2" type="radio" id="radio-disabled-2" name="radio-disabled">
            <label class="village-label" for="radio-disabled-2">
                Libellé bouton radio
                <span class="village-hint-text">Texte de description additionnel</span>
            </label>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-radio-group">
            <input value="3" type="radio" id="radio-disabled-3" name="radio-disabled">
            <label class="village-label" for="radio-disabled-3">
                Libellé bouton radio
                <span class="village-hint-text">Texte de description additionnel</span>
            </label>
        </div>
    </div>
    <div class="village-messages-group" id="radio-disabled-messages" aria-live="polite">
    </div>
</fieldset>

Ensemble de cases à cocher désactivés

Légende pour l’ensemble des éléments Texte de description additionnel 

<fieldset class="village-fieldset" id="checkbox-disabled" disabled aria-labelledby="checkbox-disabled-legend checkbox-disabled-messages">
    <legend class="village-fieldset__legend--regular village-fieldset__legend" id="checkbox-disabled-legend">
        Légende pour l’ensemble des éléments
        <span class="village-hint-text">Texte de description additionnel</span>
    </legend>
    <div class="village-fieldset__element">
        <div class="village-checkbox-group">
            <input name="checkbox-disabled-1" id="checkbox-disabled-1" type="checkbox" aria-describedby="checkbox-disabled-1-messages">
            <label class="village-label" for="checkbox-disabled-1">
                Libellé case à cocher
                <span class="village-hint-text">Texte de description additionnel</span>
            </label>
            <div class="village-messages-group" id="checkbox-disabled-1-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-checkbox-group">
            <input name="checkbox-disabled-2" id="checkbox-disabled-2" type="checkbox" aria-describedby="checkbox-disabled-2-messages">
            <label class="village-label" for="checkbox-disabled-2">
                Libellé case à cocher
                <span class="village-hint-text">Texte de description additionnel</span>
            </label>
            <div class="village-messages-group" id="checkbox-disabled-2-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-fieldset__element">
        <div class="village-checkbox-group">
            <input name="checkbox-disabled-3" id="checkbox-disabled-3" type="checkbox" aria-describedby="checkbox-disabled-3-messages">
            <label class="village-label" for="checkbox-disabled-3">
                Libellé case à cocher
                <span class="village-hint-text">Texte de description additionnel</span>
            </label>
            <div class="village-messages-group" id="checkbox-disabled-3-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="village-messages-group" id="checkbox-disabled-messages" aria-live="polite">
    </div>
</fieldset>

Bouton type submit

<button class="village-btn" id="button-4296" title="Envoyer le formulaire" type="submit">
    Envoyer
</button>

Input type submit

<input class="village-btn" value="Envoyer" title="Envoyer le formulaire" id="button-4299" type="submit">
</input>

Autres versions

Paramètres d’affichage

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