Page d’accueil Ontario.ca
English

Système de conception pour l'Ontario

Ensemble de champs

Utilisez des ensembles de champs pour regrouper des éléments de formulaire connexes.

  • Contenu: 
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;

.ontario-fieldset__legend {
	color: colours.$ontario-colour-black;
	font-family: typography.$ontario-font-raleway-modified;
	font-size: 1.1875rem;
	font-weight: fontWeights.$ontario-font-weights-bold;
	line-height: lineheight.$ontario-line-height-7;
	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;
	max-width: 38.75em;
	white-space: normal;
	width: globalVariables.$full-width;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		font-size: 1.125rem;
		line-height: 1.56;
	}
}

.ontario-fieldset__legend--large,
.ontario-fieldset__legend--heading {
	font-size: 1.75rem;
	letter-spacing: 0.02rem;
	line-height: 1.2;
	max-width: 26.25em;
	margin-top: spacing.$spacing-4;

	h1 {
		@extend %h1-styles;
		display: inline-block;
		margin: spacing.$spacing-0;
	}

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		font-size: 1.4375rem;
		line-height: 1.39;
	}
}

.ontario-fieldset__legend__flag {
	font-family: typography.$ontario-font-open-sans;
	font-size: fontSizes.$ontario-font-size-standard-body-text;
	font-weight: fontWeights.$ontario-font-weights-normal;

	&:before {
		content: '\a0';
	}
}
  • URL: /components/raw/fieldsets/fieldsets.scss
  • Chemin du système de fichiers: fractal/components/components/form/fieldsets/fieldsets.scss
  • Taille: 2.2 KB
  • Contenu: 
    .ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{font-size:2rem;letter-spacing:.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{font-size:2.5rem;letter-spacing:.04rem;line-height:1.2}}.ontario-fieldset__legend{color:#1a1a1a;font-family:"Raleway","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.1875rem;font-weight:700;line-height:1.5;margin:0 0 1rem 0;max-width:38.75em;white-space:normal;width:100%}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.75rem;letter-spacing:.02rem;line-height:1.2;max-width:26.25em;margin-top:1rem}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend__flag{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend__flag:before{content:" "}
  • URL: /components/raw/fieldsets/fieldsets.css
  • Chemin du système de fichiers: fractal/components/components/form/fieldsets/fieldsets.css
  • Taille: 1.5 KB

Quand utiliser cette composante

Utilisez la composante des ensembles de champs lorsque vous voulez démontrer le lien entre de multiples champs de saisie du formulaire.

La composante d’ensemble de champs est constituée :

  • d’un élément de légende, qui fournit un titre ou une description du groupe de champs de saisie du formulaire
  • de l’ensemble de champs, où se trouve le groupe de champs de saisie du formulaire

Lorsque vous les utilisez correctement, les éléments <fieldset> et <legend> regrouperont des champs de saisie de formulaire connexes d’une façon qui les rend accessibles aux personnes qui ne peuvent pas voir la disposition visuelle du formulaire.

Utilisation obligatoire

Lorsque vous utilisez des cases d’option ou des cases à cocher, il est obligatoire d’inclure un ensemble de champs pour démontrer qu’ils sont reliés les unes aux autres.

Pour toutes les autres composantes, les ensembles de champs ne sont pas obligatoires.

En règle générale, utilisez les ensembles de champs pour regrouper les champs de saisie connexes lorsque vous jugez que ce serait utile pour vos utilisateurs.

Légendes

L’élément de légende fournit un titre ou une description pour l’ensemble de champs (groupe de champs de saisie connexes).

Le premier élément à l’intérieur d’une composante d’ensemble de champs doit être une légende. Il peut s’agir :

  • d’une question comme « Quelle est votre adresse de livraison? »
  • d’un énoncé comme « Coordonnées »

Style

Par défaut, l’ensemble de champs n’a pas de style et la légende suivra les mêmes règles que pour les étiquettes.

Vous pouvez facultativement ajouter la catégorie « grande étiquette » à la légende pour mettre en valeur votre ensemble de champs.

Exemple

Diagramme d’une page de formulaire qui affiche une grande légende et deux champs de saisie de données regroupés dans un ensemble de champs.

Légende comme H1

S’il y a un seul élément de formulaire dans la page (p. ex. la seule chose qu’on retrouve dans la page est un groupe de cases d’option), faites de la légende de groupe le titre de la page en incluant une étiquette <h1> dans la <legend>.

Exemple

Diagramme d’une page de formulaire qui affiche le placement de la légende comme titre H1, trois cases à options et un bouton primaire pour passer à la page suivante.

HTML code

<fieldset class="ontario-fieldset">
    <legend class="ontario-fieldset__legend ontario-fieldset__legend--heading">
        <h1>Comment voulez-vous qu’on communique avec vous?<span class="ontario-label__flag">(obligatoire)</span></h1>
    </legend>
</fieldset>

Pratiques exemplaires

À faire

  • utiliser une légende comme premier élément à l’intérieur d’un ensemble de champs
  • éviter d’emboîter les ensembles de champs, car ça pourrait occasionner des comportements bizarres chez les lecteurs d’écran

À ne pas faire

  • utiliser un ensemble de champs lorsqu’il y a seulement un seul champ de saisie dans le formulaire et qu’une seule information est demandée
  • utiliser un ensemble de champs ou une légende pour une seule case à cocher dont l’étiquette explique la raison d’être

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.