semánticamente correcto de casilla de verificación HTML enumera

Question

Tengo una lista de casilla de verificación HTML que me gustaría ver en el siguiente formato:

 
Click all that apply: 
           Title A  Title B 

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

Me pregunto cuál es la mejor manera de codificar esta semánticamente?

He visto un related question en casillas de verificación semánticamente correctas, pero esto no tiene en cuenta los títulos.

¿Alguna idea?

Answer 1

¿Filas y columnas etiquetadas? Este es casi seguro un caso donde una mesa es lo correcto.

Imagínese que, una vez que el usuario haya hecho sus selecciones y enviado el formulario, usted les mostrará sus elecciones nuevamente. Claramente, sería correcto utilizar una tabla para mostrar los datos recopilados, por lo que es correcto usar una tabla para mostrar el formulario que recopila los datos.

Answer 2

Las tablas serían la forma más fácil, pero las tablas se deberían utilizar para los datos que conocemos.

Así que haría uso de una construcción 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            | 
+------------------------------------------------------------------------+ 

Todo debe entrar en una CSS. (También los 'inline' las definiciones de anchura superior)

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

no estoy seguro de si esto funciona, me gustaría tratar así.

EDITAR: Ah, estos cuadros son "div" s, por cierto.

Answer 3

Sugeriré que una tabla sería la estructura semántica correcta para esto porque el significado de una casilla de verificación está determinado por la fila y la columna en la que aparece.

Piensa en cómo mostrarías este conjunto de 1s y 0s: lo harías en una tabla. Todo lo que está haciendo es hacer que las celdas sean editables.

Estoy aún más convencido que cuando comencé a componer esta publicación. Una mesa es la estructura correcta para esto.

Answer 4

Semánticamente, este diseño me parece una tabla, por lo que si realmente necesita utilizar este diseño, debe marcarlo como una tabla. (Use th para los títulos y opciones, td para las celdas que contienen las casillas de verificación.)

Sin embargo, la forma resultante será bastante difícil de usar. Ninguno del texto es adecuado para usar como una etiqueta para cada casilla de verificación individual, por lo que los usuarios se verán obligados a buscar & haciendo clic en el área activa pequeña de la casilla de verificación.

Mi sugerencia sería utilizar dos grupos de opciones, así:

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

Sí, esto significa repetir algunos de su texto, lo que impide el mantenimiento hasta cierto punto; sin embargo, creo que para una forma, la facilidad de uso debería prevalecer sobre la capacidad de mantenimiento.