Pourquoi avons-nous besoin d'une balise fieldset?
Pourquoi avons-nous besoin d'une balise <fieldset>? Quel que soit le but recherché, il s'agit probablement d'un sous-ensemble de la balise de formulaire.
J'ai cherché des informations sur W3Schools, qui dit:
- La balise
<fieldset>Est utilisée pour regrouper des éléments liés dans un formulaire. - La balise
<fieldset>Dessine un cadre autour des éléments associés.
Plus d'explications pour ceux qui se trompent "pourquoi il existe dans la spécification" avec "ce qu'il fait". Je pense que la partie de dessin n'est pas pertinente et je ne vois pas pourquoi nous avons besoin d'une balise spéciale simplement pour regrouper des éléments liés dans un formulaire.
L'exemple le plus évident et pratique est:
<fieldset>
<legend>Colour</legend>
<input type="radio" name="colour" value="red" id="colour_red">
<label for="colour_red">Red</label>
<input type="radio" name="colour" value="green" id="colour_green">
<label for="colour_green">Green</label>
<input type="radio" name="colour" value="blue" id="colour_blue">
<label for="colour_blue">Red</label>
</fieldset>Cela permet d’étiqueter chaque bouton radio tout en fournissant également une étiquette pour le groupe dans son ensemble. Ceci est particulièrement important lorsque la technologie d'assistance (telle qu'un lecteur d'écran) est utilisée lorsque l'association des commandes et leur légende ne peuvent pas être impliquées par une présentation visuelle.
Une autre caractéristique de fieldset est que sa désactivation désactive tous les champs qu'elle contient.
<fieldset disabled>
<legend>Disabled Fields</legend>
<input type="text" value="Sample">
<textarea>Text Area</textarea>
</fieldset>
<fieldset>
<legend>Enabled Fields</legend>
<input type="text" value="Sample">
<textarea>Text Area</textarea>
</fieldset>C'est nécessaire pour l'accessibilité.
Découvrez: http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/
Les éléments HTML 4 fieldset et legend vous permettent de mettre en forme et d’organiser un grand formulaire avec de nombreux domaines d’intérêt de manière logique sans utiliser de tableaux. La balise fieldset peut être utilisée pour créer des boîtes autour des éléments sélectionnés et la balise legend donnera une légende à ces éléments. De cette façon, les éléments de formulaire peuvent être regroupés en catégories identifiées.
Différents navigateurs peuvent afficher la bordure fieldset par défaut de différentes manières. Les feuilles de style en cascade peuvent être utilisées pour supprimer la bordure ou modifier son apparence.
Comme décrit ici , le but de cette balise est de clarifier l'organisation du formulaire et de permettre au concepteur d'accéder plus facilement à la décoration des éléments de formulaire.
J'aime que lorsque vous entourez votre radio de fieldset, et que vous ne mettiez pas d'identifiant sur les balises d'entrée de vos boutons radio, le groupe représenté par le fieldset est ajouté à la tabchain comme s'il s'agissait d'un seul élément.
Cela vous permet de parcourir un formulaire et lorsque vous accédez à un jeu de champs, vous pouvez utiliser les touches de direction pour changer la radio sélectionnée, puis effectuer une tabulation lorsque vous avez terminé.
De plus, n'oubliez pas l'accessibilité. Les lecteurs d'écran ont besoin de fieldset + legend pour comprendre votre formulaire et pouvoir le lire à l'utilisateur de manière naturelle. N'hésitez pas à faire disparaître la légende si vous ne voulez pas que les utilisateurs voyants la voient. Disposer et styler correctement la légende avec CSS est parfois un navigateur multi-navigateur risqué, en particulier avec les navigateurs existants. Je trouve donc difficile de rendre l’étiquette de légende invisible pour les utilisateurs de lecteurs d’écran et d’ajouter un champ séparé, aria-hidden = "true", qui ressemble à une étiquette. les utilisateurs voyants rendent les choses simples à coiffer et les rendent accessibles.
Fieldset organise les éléments dans les formulaires de manière logique, mais améliore également l'accessibilité pour ceux qui utilisent des navigateurs sonores. Fieldset est pratique et il était donc extrêmement populaire dans le passé dans de nombreuses applications, aussi l’a-t-il implémenté en HTML.
Je trouve cela pratique pour le style CSS et l’association d’étiquettes à des contrôles. Il est facile de placer un conteneur visuel autour d’un groupe de champs et d’aligner les étiquettes.
J'utilise des ensembles de champs pour regrouper les entrées de formulaire, lorsque j'ai un formulaire énorme et que je souhaite le décomposer en une sorte d'assistant de formulaire.
Cette même question a reçu une réponse ici sur SO.
En résumant quelques avantages:
Le HTML <fieldset> L'élément est utilisé pour regrouper plusieurs contrôles ainsi que des étiquettes (<label>) dans un formulaire Web tel qu'il est défini par MDN .
En d'autres termes: La balise fieldset vous permet de regrouper logiquement des ensembles de champs afin que vos formulaires soient plus descriptifs. Ainsi, un ensemble de contrôles de formulaire est éventuellement regroupé sous un nom commun.
<fieldset>
<legend>Choose your favorite animal</legend>
<input type="radio" id="dog" name="animal">
<label for="dog">Dog</label><br/>
<input type="radio" id="cat" name="animal">
<label for="cat">Cat</label><br/>
</fieldset>Les " avantages" d'utilisation d'un groupe de champs sont les suivants:
- ils vous permettent de baliser vos données (dans ce cas un formulaire) de la manière la plus sémantique disponible. Considérez que placer vos champs dans un ensemble de champs est plus descriptif que de placer vos champs dans un div. La div ne vous dit rien sur la relation entre les champs, un fieldset vous dit qu'il y a une relation.
- en utilisant désactivé, il vous permet de désactiver le et tout son contenu en une fois.
- c'est utile pour accessibilité