DSFR v1.12.0

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.

Dépréciation

Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes

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-deprecated-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-input-group" id="input-group-4535">
                <label class="fr-label" for="text-deprecated-1">
                    Libellé champ de saisie
                </label>
                <input class="fr-input" aria-describedby="text-deprecated-1-messages" name="text-deprecated" id="text-deprecated-1" type="text">
                <div class="fr-messages-group" id="text-deprecated-1-messages" aria-live="polite">
                </div>
            </div>
            <div class="fr-input-group" id="input-group-4536">
                <label class="fr-label" for="text-deprecated-2">
                    Libellé champ de saisie
                </label>
                <input class="fr-input" aria-describedby="text-deprecated-2-messages" name="text-deprecated" id="text-deprecated-2" type="text">
                <div class="fr-messages-group" id="text-deprecated-2-messages" aria-live="polite">
                </div>
            </div>
            <div class="fr-input-group" id="input-group-4537">
                <label class="fr-label" for="text-deprecated-3">
                    Libellé champ de saisie
                </label>
                <input class="fr-input" aria-describedby="text-deprecated-3-messages" name="text-deprecated" id="text-deprecated-3" type="text">
                <div class="fr-messages-group" id="text-deprecated-3-messages" aria-live="polite">
                </div>
            </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-deprecated-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-radio-group">
                <input type="radio" id="radio-deprecated-1" name="radio-deprecated">
                <label class="fr-label" for="radio-deprecated-1">
                    Libellé radio
                </label>
            </div>
            <div class="fr-radio-group">
                <input type="radio" id="radio-deprecated-2" name="radio-deprecated">
                <label class="fr-label" for="radio-deprecated-2">
                    Libellé radio
                </label>
            </div>
            <div class="fr-radio-group">
                <input type="radio" id="radio-deprecated-3" name="radio-deprecated">
                <label class="fr-label" for="radio-deprecated-3">
                    Libellé 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-deprecated-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-checkbox-group">
                <input name="checkbox-deprecated-1" id="checkbox-deprecated-1" type="checkbox" aria-describedby="checkbox-deprecated-1-messages">
                <label class="fr-label" for="checkbox-deprecated-1">
                    Libellé checkbox
                </label>
                <div class="fr-messages-group" id="checkbox-deprecated-1-messages" aria-live="polite">
                </div>
            </div>
            <div class="fr-checkbox-group">
                <input name="checkbox-deprecated-2" id="checkbox-deprecated-2" type="checkbox" aria-describedby="checkbox-deprecated-2-messages">
                <label class="fr-label" for="checkbox-deprecated-2">
                    Libellé checkbox
                </label>
                <div class="fr-messages-group" id="checkbox-deprecated-2-messages" aria-live="polite">
                </div>
            </div>
            <div class="fr-checkbox-group">
                <input name="checkbox-deprecated-3" id="checkbox-deprecated-3" type="checkbox" aria-describedby="checkbox-deprecated-3-messages">
                <label class="fr-label" for="checkbox-deprecated-3">
                    Libellé checkbox
                </label>
                <div class="fr-messages-group" id="checkbox-deprecated-3-messages" aria-live="polite">
                </div>
            </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-deprecated-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-deprecated-1" name="radio-inline-deprecated">
                <label class="fr-label" for="radio-inline-deprecated-1">
                    Libellé radio
                </label>
            </div>
            <div class="fr-radio-group">
                <input type="radio" id="radio-inline-deprecated-2" name="radio-inline-deprecated">
                <label class="fr-label" for="radio-inline-deprecated-2">
                    Libellé radio
                </label>
            </div>
            <div class="fr-radio-group">
                <input type="radio" id="radio-inline-deprecated-3" name="radio-inline-deprecated">
                <label class="fr-label" for="radio-inline-deprecated-3">
                    Libellé 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-deprecated-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-checkbox-group">
                <input name="checkbox-inline-deprecated-1" id="checkbox-inline-deprecated-1" type="checkbox" aria-describedby="checkbox-inline-deprecated-1-messages">
                <label class="fr-label" for="checkbox-inline-deprecated-1">
                    Libellé checkbox
                </label>
                <div class="fr-messages-group" id="checkbox-inline-deprecated-1-messages" aria-live="polite">
                </div>
            </div>
            <div class="fr-checkbox-group">
                <input name="checkbox-inline-deprecated-2" id="checkbox-inline-deprecated-2" type="checkbox" aria-describedby="checkbox-inline-deprecated-2-messages">
                <label class="fr-label" for="checkbox-inline-deprecated-2">
                    Libellé checkbox
                </label>
                <div class="fr-messages-group" id="checkbox-inline-deprecated-2-messages" aria-live="polite">
                </div>
            </div>
            <div class="fr-checkbox-group">
                <input name="checkbox-inline-deprecated-3" id="checkbox-inline-deprecated-3" type="checkbox" aria-describedby="checkbox-inline-deprecated-3-messages">
                <label class="fr-label" for="checkbox-inline-deprecated-3">
                    Libellé checkbox
                </label>
                <div class="fr-messages-group" id="checkbox-inline-deprecated-3-messages" aria-live="polite">
                </div>
            </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-deprecated-legend radio-error-deprecated-desc-error" role="group">
        <legend class="fr-fieldset__legend fr-text--regular" id='radio-error-deprecated-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-deprecated-1" name="radio-error-deprecated">
                <label class="fr-label" for="radio-error-deprecated-1">
                    Libellé radio
                </label>
            </div>
            <div class="fr-radio-group">
                <input type="radio" id="radio-error-deprecated-2" name="radio-error-deprecated">
                <label class="fr-label" for="radio-error-deprecated-2">
                    Libellé radio
                </label>
            </div>
            <div class="fr-radio-group">
                <input type="radio" id="radio-error-deprecated-3" name="radio-error-deprecated">
                <label class="fr-label" for="radio-error-deprecated-3">
                    Libellé radio
                </label>
            </div>
        </div>
        <p id="radio-error-deprecated-desc-error" class="fr-error-text">
            Texte d’erreur obligatoire
        </p>
    </fieldset>
</div>

Ensemble de boutons radio riches

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-deprecated-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 fr-radio-rich">
                <input type="radio" id="radio-disabled-deprecated-1" name="radio-disabled-deprecated">
                <label class="fr-label" for="radio-disabled-deprecated-1">
                    Libellé radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
            </div>
            <div class="fr-radio-group fr-radio-rich">
                <input type="radio" id="radio-disabled-deprecated-2" name="radio-disabled-deprecated">
                <label class="fr-label" for="radio-disabled-deprecated-2">
                    Libellé radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
            </div>
            <div class="fr-radio-group fr-radio-rich">
                <input type="radio" id="radio-disabled-deprecated-3" name="radio-disabled-deprecated">
                <label class="fr-label" for="radio-disabled-deprecated-3">
                    Libellé radio
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
            </div>
        </div>
    </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-deprecated-legend checkbox-error-deprecated-desc-error" role="group">
        <legend class="fr-fieldset__legend fr-text--regular" id='checkbox-error-deprecated-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 name="checkbox-error-deprecated-1" id="checkbox-error-deprecated-1" type="checkbox" aria-describedby="checkbox-error-deprecated-1-messages">
                <label class="fr-label" for="checkbox-error-deprecated-1">
                    Libellé checkbox
                </label>
                <div class="fr-messages-group" id="checkbox-error-deprecated-1-messages" aria-live="polite">
                </div>
            </div>
            <div class="fr-checkbox-group">
                <input name="checkbox-error-deprecated-2" id="checkbox-error-deprecated-2" type="checkbox" aria-describedby="checkbox-error-deprecated-2-messages">
                <label class="fr-label" for="checkbox-error-deprecated-2">
                    Libellé checkbox
                </label>
                <div class="fr-messages-group" id="checkbox-error-deprecated-2-messages" aria-live="polite">
                </div>
            </div>
            <div class="fr-checkbox-group">
                <input name="checkbox-error-deprecated-3" id="checkbox-error-deprecated-3" type="checkbox" aria-describedby="checkbox-error-deprecated-3-messages">
                <label class="fr-label" for="checkbox-error-deprecated-3">
                    Libellé checkbox
                </label>
                <div class="fr-messages-group" id="checkbox-error-deprecated-3-messages" aria-live="polite">
                </div>
            </div>
        </div>
        <p id="checkbox-error-deprecated-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-deprecated-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" id="input-group-4549">
                <label class="fr-label" for="text-disabled-deprecated-1">
                    Libellé champ de saisie
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <input class="fr-input" aria-describedby="text-disabled-deprecated-1-messages" disabled name="text-disabled-deprecated" id="text-disabled-deprecated-1" type="text">
                <div class="fr-messages-group" id="text-disabled-deprecated-1-messages" aria-live="polite">
                </div>
            </div>
            <div class="fr-input-group fr-input-group--disabled" id="input-group-4550">
                <label class="fr-label" for="text-disabled-deprecated-2">
                    Libellé champ de saisie
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <input class="fr-input" aria-describedby="text-disabled-deprecated-2-messages" disabled name="text-disabled-deprecated" id="text-disabled-deprecated-2" type="text">
                <div class="fr-messages-group" id="text-disabled-deprecated-2-messages" aria-live="polite">
                </div>
            </div>
            <div class="fr-input-group fr-input-group--disabled" id="input-group-4551">
                <label class="fr-label" for="text-disabled-deprecated-3">
                    Libellé champ de saisie
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <input class="fr-input" aria-describedby="text-disabled-deprecated-3-messages" disabled name="text-disabled-deprecated" id="text-disabled-deprecated-3" type="text">
                <div class="fr-messages-group" id="text-disabled-deprecated-3-messages" aria-live="polite">
                </div>
            </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-deprecated-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-deprecated-1" name="radio-disabled-deprecated">
                <label class="fr-label" for="radio-disabled-deprecated-1">
                    Libellé 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-deprecated-2" name="radio-disabled-deprecated">
                <label class="fr-label" for="radio-disabled-deprecated-2">
                    Libellé 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-deprecated-3" name="radio-disabled-deprecated">
                <label class="fr-label" for="radio-disabled-deprecated-3">
                    Libellé 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-deprecated-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 name="checkbox-disabled-deprecated-1" id="checkbox-disabled-deprecated-1" type="checkbox" aria-describedby="checkbox-disabled-deprecated-1-messages">
                <label class="fr-label" for="checkbox-disabled-deprecated-1">
                    Libellé checkbox
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <div class="fr-messages-group" id="checkbox-disabled-deprecated-1-messages" aria-live="polite">
                </div>
            </div>
            <div class="fr-checkbox-group">
                <input disabled name="checkbox-disabled-deprecated-2" id="checkbox-disabled-deprecated-2" type="checkbox" aria-describedby="checkbox-disabled-deprecated-2-messages">
                <label class="fr-label" for="checkbox-disabled-deprecated-2">
                    Libellé checkbox
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <div class="fr-messages-group" id="checkbox-disabled-deprecated-2-messages" aria-live="polite">
                </div>
            </div>
            <div class="fr-checkbox-group">
                <input disabled name="checkbox-disabled-deprecated-3" id="checkbox-disabled-deprecated-3" type="checkbox" aria-describedby="checkbox-disabled-deprecated-3-messages">
                <label class="fr-label" for="checkbox-disabled-deprecated-3">
                    Libellé checkbox
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
                <div class="fr-messages-group" id="checkbox-disabled-deprecated-3-messages" aria-live="polite">
                </div>
            </div>
        </div>
    </fieldset>
</div>

Paramètres d’affichage

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