Interface de contrôle des tests
Retour

Formulaires (forms)

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

<div class="fr-form-group">
    <fieldset class="fr-fieldset">
        <legend class="fr-fieldset__legend" id='text-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-input-group">
                <label class="fr-label" for="text-1">Label champs de saisie
                </label>
                <input class="fr-input" type="text" id="text-1" name="text-1">
            </div>
            <div class="fr-input-group">
                <label class="fr-label" for="text-2">Label champs de saisie
                </label>
                <input class="fr-input" type="text" id="text-2" name="text-2">
            </div>
            <div class="fr-input-group">
                <label class="fr-label" for="text-3">Label champs de saisie
                </label>
                <input class="fr-input" type="text" id="text-3" name="text-3">
            </div>
        </div>
    </fieldset>
</div>

Ensemble de boutons radio

Légende pour l’ensemble de champs 

<div class="fr-form-group">
    <fieldset class="fr-fieldset">
        <legend class="fr-fieldset__legend fr-text--regular" id='radio-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-radio-group">
                <input type="radio" id="radio-1" name="radio">
                <label class="fr-label" for="radio-1">1 Label radio
                </label>
            </div>
            <div class="fr-radio-group">
                <input type="radio" id="radio-2" name="radio">
                <label class="fr-label" for="radio-2">1 Label radio
                </label>
            </div>
            <div class="fr-radio-group">
                <input type="radio" id="radio-3" name="radio">
                <label class="fr-label" for="radio-3">1 Label radio
                </label>
            </div>
        </div>
    </fieldset>
</div>

Ensemble de cases à cocher

Légende pour l’ensemble de champs 

<div class="fr-form-group">
    <fieldset class="fr-fieldset">
        <legend class="fr-fieldset__legend fr-text--regular" id='checkbox-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkbox-1" name="checkbox-1">
                <label class="fr-label" for="checkbox-1">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkbox-2" name="checkbox-2">
                <label class="fr-label" for="checkbox-2">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkbox-3" name="checkbox-3">
                <label class="fr-label" for="checkbox-3">Label checkbox
                </label>
            </div>
        </div>
    </fieldset>
</div>

Ensemble de boutons radio, en ligne

Légende pour l’ensemble de champs 

<div class="fr-form-group">
    <fieldset class="fr-fieldset fr-fieldset--inline">
        <legend class="fr-fieldset__legend fr-text--regular" id='radio-inline-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-radio-group">
                <input type="radio" id="radio-inline-1" name="radio-inline">
                <label class="fr-label" for="radio-inline-1">1 Label radio
                </label>
            </div>
            <div class="fr-radio-group">
                <input type="radio" id="radio-inline-2" name="radio-inline">
                <label class="fr-label" for="radio-inline-2">1 Label radio
                </label>
            </div>
            <div class="fr-radio-group">
                <input type="radio" id="radio-inline-3" name="radio-inline">
                <label class="fr-label" for="radio-inline-3">1 Label radio
                </label>
            </div>
        </div>
    </fieldset>
</div>

Ensemble de cases à cocher, en ligne

Légende pour l’ensemble de champs 

<div class="fr-form-group">
    <fieldset class="fr-fieldset fr-fieldset--inline">
        <legend class="fr-fieldset__legend fr-text--regular" id='checkbox-inline-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkbox-inline-1" name="checkbox-inline-1">
                <label class="fr-label" for="checkbox-inline-1">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkbox-inline-2" name="checkbox-inline-2">
                <label class="fr-label" for="checkbox-inline-2">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkbox-inline-3" name="checkbox-inline-3">
                <label class="fr-label" for="checkbox-inline-3">Label checkbox
                </label>
            </div>
        </div>
    </fieldset>
</div>

Ensemble de boutons radio avec erreur

Légende pour l’ensemble de champs Texte de description additionnel

Texte d’erreur obligatoire 

<div class="fr-form-group">
    <fieldset class="fr-fieldset fr-fieldset--error" aria-labelledby="radio-error-legend radio-error-desc-error" role="group">
        <legend class="fr-fieldset__legend fr-text--regular" id='radio-error-legend'>
            Légende pour l’ensemble de champs
            <span class="fr-hint-text">Texte de description additionnel</span>
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-radio-group">
                <input type="radio" id="radio-error-1" name="radio-error">
                <label class="fr-label" for="radio-error-1">1 Label radio
                </label>
            </div>
            <div class="fr-radio-group">
                <input type="radio" id="radio-error-2" name="radio-error">
                <label class="fr-label" for="radio-error-2">1 Label radio
                </label>
            </div>
            <div class="fr-radio-group">
                <input type="radio" id="radio-error-3" name="radio-error">
                <label class="fr-label" for="radio-error-3">1 Label radio
                </label>
            </div>
        </div>
        <p id="radio-error-desc-error" class="fr-error-text">
            Texte d’erreur obligatoire
        </p>
    </fieldset>
</div>

Ensemble de cases à cocher, avec erreur

Légende pour l’ensemble de champs Texte de description additionnel

Texte d’erreur obligatoire 

<div class="fr-form-group">
    <fieldset class="fr-fieldset fr-fieldset--error" aria-labelledby="checkbox-error-legend checkbox-error-desc-error" role="group">
        <legend class="fr-fieldset__legend fr-text--regular" id='checkbox-error-legend'>
            Légende pour l’ensemble de champs
            <span class="fr-hint-text">Texte de description additionnel</span>
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkbox-error-1" name="checkbox-error-1">
                <label class="fr-label" for="checkbox-error-1">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkbox-error-2" name="checkbox-error-2">
                <label class="fr-label" for="checkbox-error-2">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkbox-error-3" name="checkbox-error-3">
                <label class="fr-label" for="checkbox-error-3">Label checkbox
                </label>
            </div>
        </div>
        <p id="checkbox-error-desc-error" class="fr-error-text">
            Texte d’erreur obligatoire
        </p>
    </fieldset>
</div>

Ensemble de champs de saisie désactivés

Légende pour l’ensemble de champs Texte de description additionnel 

<div class="fr-form-group">
    <fieldset class="fr-fieldset" disabled="disabled">
        <legend class="fr-fieldset__legend" id='text-disabled-legend'>
            Légende pour l’ensemble de champs
            <span class="fr-hint-text">Texte de description additionnel</span>
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-input-group">
                <label class="fr-label" for="text-disabled-1">Label champs de saisie
                </label>
                <input class="fr-input" type="text" id="text-disabled-1" name="text-disabled-1">
            </div>
            <div class="fr-input-group">
                <label class="fr-label" for="text-disabled-2">Label champs de saisie
                </label>
                <input class="fr-input" type="text" id="text-disabled-2" name="text-disabled-2">
            </div>
            <div class="fr-input-group">
                <label class="fr-label" for="text-disabled-3">Label champs de saisie
                </label>
                <input class="fr-input" type="text" id="text-disabled-3" name="text-disabled-3">
            </div>
        </div>
    </fieldset>
</div>

Ensemble de boutons radio désactivés

Légende pour l’ensemble de champs Texte de description additionnel 

<div class="fr-form-group">
    <fieldset class="fr-fieldset" disabled="disabled">
        <legend class="fr-fieldset__legend fr-text--regular" id='radio-disabled-legend'>
            Légende pour l’ensemble de champs
            <span class="fr-hint-text">Texte de description additionnel</span>
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-radio-group">
                <input type="radio" id="radio-disabled-1" name="radio-disabled">
                <label class="fr-label" for="radio-disabled-1">1 Label radio
                </label>
            </div>
            <div class="fr-radio-group">
                <input type="radio" id="radio-disabled-2" name="radio-disabled">
                <label class="fr-label" for="radio-disabled-2">1 Label radio
                </label>
            </div>
            <div class="fr-radio-group">
                <input type="radio" id="radio-disabled-3" name="radio-disabled">
                <label class="fr-label" for="radio-disabled-3">1 Label radio
                </label>
            </div>
        </div>
    </fieldset>
</div>

Ensemble de cases à cocher désactivés

Légende pour l’ensemble de champs Texte de description additionnel 

<div class="fr-form-group">
    <fieldset class="fr-fieldset" disabled="disabled">
        <legend class="fr-fieldset__legend fr-text--regular" id='checkbox-disabled-legend'>
            Légende pour l’ensemble de champs
            <span class="fr-hint-text">Texte de description additionnel</span>
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkbox-disabled-1" name="checkbox-disabled-1">
                <label class="fr-label" for="checkbox-disabled-1">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkbox-disabled-2" name="checkbox-disabled-2">
                <label class="fr-label" for="checkbox-disabled-2">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkbox-disabled-3" name="checkbox-disabled-3">
                <label class="fr-label" for="checkbox-disabled-3">Label checkbox
                </label>
            </div>
        </div>
    </fieldset>
</div>

Bouton type submit

<button class="fr-btn" title="Envoyer le formulaire" type="submit">
    Envoyer
</button>

Input type submit

<input class="fr-btn" value="Envoyer" title="Envoyer le formulaire" type="submit">
</input>