Semanticamente listas HTML Caixa de seleção Corrigir

Question

Eu tenho uma lista de caixa de seleção HTML que eu gostaria de exibir no seguinte formato:

Click all that apply:
                                 Title A      Title B

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

Eu estou querendo saber qual a melhor maneira de código deste semanticamente?

Eu vi uma pergunta relacionada em caixas semanticamente corretas, mas isso não leva em conta os títulos.

Todas as idéias?

Answer 1

linhas rotuladas e colunas? Isto é quase certamente um caso em que uma mesa é a coisa correta.

Imagine que, uma vez que o usuário fez suas seleções e enviado o formulário, você, em seguida, exibir as suas escolhas de volta para eles. Seria claramente correta de usar uma tabela para exibir os dados recolhidos, por isso é correto usar uma tabela para exibir o formulário que recolhe os dados.

Answer 2

Vou sugerir que uma mesa seria a estrutura semântica correta para isso, porque o significado de uma caixa de seleção é determinado pela linha e coluna em que ele aparece.

Pense em como você iria exibir este conjunto de 1s e 0s: Você faria isso em uma tabela. Tudo o que você está fazendo é fazer as células editáveis.

Eu estou ainda mais convencido do que quando eu comecei a compor este post. Uma tabela é a estrutura certa para isso.

Answer 3

Semanticamente, este layout Parece-me que uma mesa, então se você realmente precisa usar este esquema, você deve marcá-lo como uma tabela. (Use th para os títulos e opções, td para as células que contêm as caixas de seleção.)

No entanto, a forma resultante será muito difícil de usar. Nenhum texto é adequado para uso como uma etiqueta para cada caixa de seleção indivíduo, para que os usuários serão forçados a encontrar e clique na pequena área ativa da própria caixa.

A minha sugestão seria a utilização de dois grupos de opções, assim:

<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>

Sim, isso significa repetir um pouco do seu texto, que impede a manutenção, até certo ponto; no entanto, eu acho que para um formulário, usabilidade deve trunfo manutenção.

Answer 4

Tabelas seria a maneira mais fácil, mas tabelas deve ser usado para dados como sabemos.

Então, eu usaria uma construção 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                                              |
+------------------------------------------------------------------------+

Tudo deve entrar em um CSS. (Também o 'inline' width definições acima)

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

Eu não tenho certeza se isso funciona, gostaria de experimentá-lo assim.

EDIT:. Ah, essas caixas são "div" s, btw