Listes de cases à cocher HTML sémantiquement correctes

Question

J'ai une liste de cases à cocher HTML à afficher dans le format suivant:

Click all that apply:
                                 Title A      Title B

Option 1                         [  ]         [  ]
Option 2                         [  ]         [  ]
Option 3                         [  ]         [  ]

Je me demande quel est le meilleur moyen de coder cela sémantiquement?

J'ai déjà lu une question connexe sur les cases à cocher sémantiquement correctes, mais cela ne prend pas en compte les titres.

Des idées?

Answer 1

Lignes et colonnes étiquetées? C’est presque certainement un cas où une table est la bonne chose.

Imaginez que, une fois que l'utilisateur a effectué ses sélections et soumis le formulaire, vous lui affichez ensuite ses choix. Il serait clairement correct d'utiliser un tableau pour afficher les données collectées. Il est donc correct d'utiliser un tableau pour afficher le formulaire qui rassemble les données.

Answer 2

Je suggérerai qu'un tableau correspondrait à la structure sémantique appropriée, car la signification d'une case à cocher est déterminée par la ligne et la colonne dans lesquelles elle apparaît.

Pensez à la façon dont vous afficheriez cet ensemble de 1 et de 0: vous le feriez dans un tableau. Vous ne faites que rendre les cellules modifiables.

Je suis encore plus convaincu que lorsque j'ai commencé à composer ce billet. Un tableau est la bonne structure pour cela.

Answer 3

Sémantiquement, cette mise en page me ressemble à une table, donc si vous avez vraiment besoin de l'utiliser, vous devez la marquer en tant que table. (Utilisez th pour les titres et les options, td pour les cellules contenant les cases à cocher.)

Cependant, le formulaire résultant sera assez difficile à utiliser. Aucun texte n’est approprié pour être utilisé comme étiquette pour chaque case à cocher, les utilisateurs seront donc obligés de rechercher & amp; cliquez sur la petite zone active de la case à cocher elle-même.

Ma suggestion serait d'utiliser deux groupes d'options, comme suit:

<fieldset><legend>Title 1</legend>
  <input type="checkbox" id="t1o1"><label for="t1o1">Option 1</label>
  <input type="checkbox" id="t1o2"><label for="t1o2">Option 2</label>
  ...
</fieldset>
<fieldset><legend>Title 2</legend>
  ...
  <input type="checkbox" id="t3o2"><label for="t2o3">Option 2</label>
  <input type="checkbox" id="t2o3"><label for="t2o3">Option 3</label>
</fieldset>

Oui, cela signifie que vous répétez une partie de votre texte, ce qui entrave quelque peu la maintenabilité. cependant, je pense que pour un formulaire, la facilité d'utilisation doit l'emporter sur la maintenabilité.

Answer 4

Les tableaux seraient le moyen le plus simple, mais les tableaux devraient être utilisés pour les données, comme nous le savons.

J'utiliserais donc une construction div:

+---style="width:XXXpx"--------------------------------------------------+
|+---style="width:100%"-------------------------------------------------+|
||                                                +class=opt++class=opt+||
||                                                | title a || title b |||
||                                                +---------++---------+||
|+----------------------------------------------------------------------+|
|+---style="width:100%"-------------------------------------------------+|
||+----------------------------------------------++class=opt++class=opt+||
||| Option 1                                     ||   [x]   ||   [x]   |||
||+----------------------------------------------++---------++---------+||
|+----------------------------------------------------------------------+|
| //repeat for every option                                              |
+------------------------------------------------------------------------+

Tout devrait aller dans un CSS. (Voir également les définitions de largeur 'inline' ci-dessus)

.opt { 
  float:right; width: 10%; /*probably*/ z-index: 99; 
  /*edit2:*/ position: relative;
}

Je ne suis pas sûr que cela fonctionne, je l'essayerais comme ça.

EDIT: Ah, ces cases sont "div", en fait.