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 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">
                    Label radio
                </label>
            </div>
            <div class="fr-radio-group">
                <input type="radio" id="radio-2" name="radio">
                <label class="fr-label" for="radio-2">
                    Label radio
                </label>
            </div>
            <div class="fr-radio-group">
                <input type="radio" id="radio-3" name="radio">
                <label class="fr-label" for="radio-3">
                    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">
                    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">
                    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">
                    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 additionel

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 additionel</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">
                    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">
                    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">
                    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 additionel

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

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

<div class="fr-form-group">
    <fieldset class="fr-fieldset">
        <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 additionel</span>
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-radio-group">
                <input disabled type="radio" id="radio-disabled-1" name="radio-disabled">
                <label class="fr-label" for="radio-disabled-1">
                    Label radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
            </div>
            <div class="fr-radio-group">
                <input disabled type="radio" id="radio-disabled-2" name="radio-disabled">
                <label class="fr-label" for="radio-disabled-2">
                    Label radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
            </div>
            <div class="fr-radio-group">
                <input disabled type="radio" id="radio-disabled-3" name="radio-disabled">
                <label class="fr-label" for="radio-disabled-3">
                    Label radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
            </div>
        </div>
    </fieldset>
</div>

Ensemble de cases à cocher désactivés

Légende pour l’ensemble de champs texte additionel 

<div class="fr-form-group">
    <fieldset class="fr-fieldset">
        <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 additionel</span>
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-checkbox-group">
                <input disabled type="checkbox" id="checkbox-disabled-1" name="checkbox-disabled-1">
                <label class="fr-label" for="checkbox-disabled-1">
                    Label checkbox
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input disabled type="checkbox" id="checkbox-disabled-2" name="checkbox-disabled-2">
                <label class="fr-label" for="checkbox-disabled-2">
                    Label checkbox
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input disabled type="checkbox" id="checkbox-disabled-3" name="checkbox-disabled-3">
                <label class="fr-label" for="checkbox-disabled-3">
                    Label checkbox
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </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>

Paramètres d’affichage

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