L'utilisation de la balise HTML fieldset a-t-elle un sens au-delà des formes de regroupement?
Habituellement, je l'ai vu avec des formulaires, mais j'ai trouvé utile de regrouper des ensembles de données connexes (par exemple, lorsque vous avez plusieurs tables sur une page, en utilisant un fieldset autour de chaque table ou groupe de tables connexes pour définir une signification visible et un nom de groupe (légende)). Est-ce abuser de la balise fieldset au point où, dans mes utilisations, il n'a plus de sens sémantique?
6 réponses
Je peux voir des avantages sémantiques pour bloquer le contenu dans des fieldsets avec des légendes.
Bien que le W3C ait associé l'utilisation de fieldsets et de legends à des formulaires, permettre l'utilisation en dehors de la balise form ouvre de nouvelles limites à l'expérimentation. Potentiellement similaire à la liste de définition utilisée.
Personnellement, je ne pense pas que le" champ " dans fieldset soit spécifique au champ de formulaire. Il vient d'hériter de la relation de son utilisation dans la balise de formulaire. le champ est en référence au groupement.
Imaginez aller à vos parcs et loisirs locaux pour jouer au softball avec vos amis. Il y a 3 champs disponibles. Tous ont des signes sur la clôture "BASEBALL seulement"
Vous emballez votre équipement et rentrez chez vous?
Étiquetage L'utilisation de fieldsets et de légendes en dehors de l'abus de balises de formulaire est étroite.
Nulle part dans la définition ne mentionne les formes:
L'élément FIELDSET permet aux auteurs de groupe de thématiques connexes contrôle et des étiquettes. Le regroupement des contrôles le rend plus facile pour les utilisateurs de comprendre leur objectif tout en faciliter la navigation par onglets pour agents utilisateurs visuels et discours navigation pour l'utilisateur orienté vers la parole agent. L'utilisation correcte de cet élément rend les documents plus accessibles.
Je considère le contrôle de formatage des balises xhtml. div p blockquote etc.
<h1>The Big Book about Everything</h1>
<fieldset>
<legend>Jokes</legend>
<h2>30 pages of humorous Jokes</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset>
<legend>Poems</legend>
<h2>20 pages of well written poems</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset>
<legend>Horror</legend>
<h2>3 Short and scary stories</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset>
<legend>Mystery</legend>
<h2>3 Short and mysterious stories</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
Je crois que ce serait un abus. http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.10 indique "L'élément FIELDSET permet aux auteurs de regrouper les contrôles et les étiquettes liés par thème".
Le bit" champ " dans le nom fieldset fait référence aux champs <form>.
L'utilisation de fieldset en dehors de form S pour regrouper des données aribtrary est clairement une mauvaise utilisation sémantique.
Cependant, votre code HTML validera Et Dieu ne tuera pas un chaton.
Fieldset est d'environ forme de groupe de contrôle. En regroupant les contrôles de formulaire associés, les auteurs peuvent diviser un formulaire en parties plus petites et plus faciles à gérer, améliorant ainsi la catastrophe d'utilisabilité qui peut survenir lorsque les utilisateurs sont confrontés à un trop grand nombre de contrôles de formulaire.
Cela ne signifie pas qu'un fieldset regroupe toujours des champs dans un formulaire , même si la spécification ne discute que du fieldset dans le contexte de l'interaction de l'utilisateur avec le formulaire...
Donc, les "abus" peuvent provenir du fait les spécifications HTML 4 et XHTML n'exigent pas que fieldset et legend soient contenus dans les éléments de formulaire. FIELDSET peut même être l'enfant de L'élément BODY. C'est une syntaxe valide pour mettre des fieldsets en dehors des formulaires.
Mais, lorsque vous décrivez quelque chose comme un fieldset qui n'est pas vraiment un fieldset, vous causez juste de la confusion.
Il est préférable de penser aux balises HTML / XHTML comme décrivant la signification d'un élément plutôt que son apparence. Ensuite, vous pouvez utiliser CSS pour faire ressembler l'élément tout ce que vous voulez.
Si vous regroupez des données à des fins de présentation, vous pouvez trouver ici une belle alternative CSS .
Pour référence:
.fieldset {
border-right: 1px solid #75736E;
border-bottom: 1px solid #75736E;
border-left: 1px solid #F2F0EE;
border-top: 1px solid #F2F0EE;
padding: 10px 3px 3px 3px;
}
.outer {
border-left: 1px solid #75736E;
border-top: 1px solid #75736E;
border-right: 1px solid #F2F0EE;
border-bottom: 1px solid #F2F0EE;
width: 200px; /* CHANGE THIS FOR BOX SIZE */
}
.legend {
float: left;
margin-left: 15px;
margin-top: -8px;
padding-left: 5px;
padding-right: 5px;
font-weight: bold;
background: #FFF;
}
<div class="legend">Lipsum.com Is The Best</div>
<div class="outer">
<div class="fieldset">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec congue fermentum metus. Quisque vel ante.
Cras purus metus, dignissim at, luctus et, sollicitudin eget, urna.
Maecenas eget lacus. Aenean bibendum risus non erat mattis semper.
Aliquam placerat nibh eget lacus. Sed blandit eleifend justo. Nam elit.
Fusce feugiat orci id eros facilisis laoreet.
Integer vestibulum condimentum purus.
Proin vehicula congue lacus. Quisque placerat diam nec enim.
Nunc lorem. Maecenas nec sem sed nulla tristique faucibus.</div></div>
Si vous souhaitez regrouper des tables, pensez à utiliser un élément d'en-tête approprié (h1-H6) pour chaque groupe. Les tables individuelles peuvent être décrites à l'aide de l'élément 'caption'. L'attribut 'summary' est également disponible pour chaque table.
De la spécification:
Chaque table peut avoir un la légende (voir la LÉGENDE) qui fournit une brève description de la le but de la table. Une description plus longue peut également être fourni (via le résumé attribut) pour la avantage des personnes utilisation de la parole ou de l'utilisateur en Braille agent.
Et pour mémoire, l'élément 'fieldset' n'est pas destiné à être utilisé en dehors des formulaires. Et dans les formulaires, il est destiné à regrouper conceptuellement comme des champs de saisie-des choses comme "informations personnelles" ou "adresse de facturation", etc.
Voici un article intéressant qui explique ce que les utilisateurs du lecteur d'écran entendent lors de la navigation sur les fieldsets. http://www.rnib.org.uk/wacblog/articles/too-much-accessibility/too-much-accessibility-fieldset-legends/
La balise fieldset est également utile pour les lecteurs d'écran et d'autres technologies d'assistance.