Pourquoi avons-nous besoin d'une balise fieldset?

Pourquoi avons-nous besoin d'un <fieldset> étiquette? Quel que soit le but qu'il sert, c'est probablement un sous-ensemble de la balise form.

J'ai recherché des informations sur W3Schools, qui disent:

• le <fieldset> balise est utilisée pour regrouper les éléments liés dans un formulaire.
• La <fieldset>balise dessine une boîte autour des éléments associés.

Plus d'explications pour ceux qui confondent «pourquoi il existe dans la spécification» pour «ce qu'il fait». Je pense que la partie dessin n'est pas pertinente, et je ne vois pas pourquoi nous avons besoin d'une balise spéciale juste pour regrouper certains éléments liés dans un formulaire.

L'exemple pratique le plus évident 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">Blue</label>

</fieldset>

Cela permet à chaque bouton radio d'être étiqueté tout en fournissant également une étiquette pour le groupe dans son ensemble. Ceci est particulièrement important lorsque la technologie d'assistance (comme un lecteur d'écran) est utilisée lorsque l'association des commandes et de leur légende ne peut pas être impliquée par une présentation visuelle.

Une autre caractéristique de fieldset est que sa désactivation désactive tous les champs qu'il 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é.

Consultez: http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

Les éléments HTML 4 fieldsetet legendvous permettent de mettre en page et d'organiser un grand formulaire avec de nombreux domaines d'intérêt différents de manière logique sans utiliser de tableaux. La fieldsetbalise peut être utilisée pour créer des boîtes autour des éléments sélectionnés etlegend balise donnera une légende à ces éléments. De cette manière, les éléments de formulaire peuvent être regroupés en catégories identifiées.

Différents navigateurs peuvent afficher la fieldsetbordure 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 à un concepteur d'accéder plus facilement à la décoration des éléments du formulaire.

Fieldset organise les éléments dans des formulaires de manière logique mais améliore également l'accessibilité pour ceux qui utilisent des navigateurs auditifs. Fieldset est pratique et était donc extrêmement populaire dans le passé dans de nombreuses applications, ils l'ont donc implémenté en html également.

J'aime le fait que lorsque vous entourez vos radios avec fieldset, et que vous ne mettez pas d'identifiant sur vos balises d'entrée de bouton radio, alors 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 ensemble de champs, vous pouvez utiliser les touches fléchées pour modifier la radio sélectionnée, puis vous éloigner lorsque vous avez terminé.

N'oubliez pas non plus l'accessibilité. Les lecteurs d'écran ont besoin d'un jeu de champs + une légende 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. La mise en page et le style de la légende juste avec CSS sont parfois difficiles pour les navigateurs croisés, en particulier avec les anciens navigateurs, donc je trouve que la balise de légende est invisible pour les utilisateurs de lecteurs d'écran et l'ajout d'un span distinct, aria-hidden = "true" stylé comme une étiquette pour les utilisateurs voyants simplifient le style des choses et les gardent accessibles.

Je le trouve pratique pour le style CSS et l'association d'étiquettes aux contrôles. Cela permet de placer facilement 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 veux le diviser en une sorte d'assistant de formulaire.

Cette même question a été répondue ici sur SO.

Je résume juste quelques avantages:

L' <fieldset> élément HTML  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 éventuellement regroupés 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 " de l'utilisation d'un fieldset sont:

• 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. Le div ne vous dit rien sur la relation entre les champs, un fieldset vous indique qu'il existe une relation.
• en utilisant désactivé , il vous permet de désactiver le et tout son contenu en une seule fois.
• c'est utile pour l' accessibilité

Quant à moi, l'un des plus grands avantages du <fieldset>...</fieldset> élément est la possibilité de préserver le <form>...</form>contexte même si le<fieldset>...</fieldset> n'est pas à l'intérieur du formulaire.

Par exemple, le formulaire suivant:

<div class="header">
    <form id="myForm">
        <input type="text" name="someInput">
    </form>
</div>

<div class="footer">
    <fieldset form="myForm">
        <input type="text" name="someInput1">
    </fieldset>
</div>

est sémantiquement identique à la forme suivante:

<form>
    <input type="text" name="someInput">
    <input type="text" name="someInput1">
</form>