Lorsque des éléments sont liés entre eux, il est avantageux de les regrouper, car cela aide l'utilisateur à mieux comprendre le formulaire et lui permet de se concentrer sur des ensembles de champs plus petits et structurés, plutôt que d'essayer de comprendre l'ensemble du formulaire en une seule fois. Le regroupement peut être réalisé à la fois visuellement sur l'interface et logiquement dans le code.

Éléments fieldset et legend

Vous pouvez utiliser l’élément <fieldset> pour regrouper plusieurs éléments de formulaire liés. Il fournit un conteneur pour ces éléments, et vous pouvez ajouter un titre de groupe à l’aide de l’élément <legend> imbriqué. Il est important de regrouper les boutons radio et cases à cocher associés, et d’autres types de champs peuvent également être regroupés si nécessaire. Cela contribue à améliorer l’organisation et la clarté du formulaire pour l’utilisateur.

Exemple

Cet exemple utilise l’élément fieldset pour regrouper des contrôles de formulaire liés et l’élément legend pour fournir une légende au groupe. Il se concentre sur un formulaire de sélection de produits où les utilisateurs peuvent choisir plusieurs produits.

• Le fieldset regroupe les cases à cocher, rendant le formulaire plus organisé et plus facile à comprendre pour l’utilisateur ;

• Le legend fournit un titre, indiquant à l’utilisateur que la section concerne le choix des produits ;

• Les cases à cocher permettent à l’utilisateur de sélectionner plusieurs produits parmi les options disponibles. Chaque option est associée à un produit spécifique (légume, fruit, produit laitier).

Remarque

Félicitations pour avoir terminé le cours HTML ! Vous avez atteint le dernier chapitre et disposez désormais d'une base solide en développement web. Si vous souhaitez approfondir le domaine, envisagez d'explorer CSS – le langage de la mise en forme et du design des pages web. Développez vos compétences et débloquez des possibilités infinies pour créer des sites web visuellement attrayants.