Semanticamente listas HTML Caixa de seleção Corrigir
-
05-07-2019 - |
Pergunta
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?
Solução
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.
Outras dicas
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.
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.
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