Elenchi di casella di controllo HTML semanticamente corretti

Question

Ho un elenco di caselle di controllo HTML che vorrei visualizzare nel seguente formato:

Click all that apply:
                                 Title A      Title B

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

Mi chiedo quale sia il modo migliore per codificarlo semanticamente?

Ho visto una domanda correlata su caselle di controllo semanticamente corrette, ma questo non tiene conto dei titoli.

Qualche idea?

Answer 1

Righe e colonne etichettate? Questo è quasi certamente un caso in cui una tabella è la cosa giusta.

Immagina che, una volta che l'utente ha effettuato le selezioni e inviato il modulo, visualizzi nuovamente le loro scelte. Sarebbe chiaramente corretto utilizzare una tabella per visualizzare i dati raccolti, quindi è corretto utilizzare una tabella per visualizzare il modulo che raccoglie i dati.

Answer 2

Suggerirò che una tabella sarebbe la struttura semantica corretta per questo perché il significato di una casella di controllo è determinato dalla riga e dalla colonna in cui appare.

Pensa a come visualizzeresti questo insieme di 1 e 0: lo faresti in una tabella. Tutto quello che stai facendo è rendere modificabili le celle.

Sono ancora più convinto di quando ho iniziato a scrivere questo post. Una tabella è la struttura giusta per questo.

Answer 3

Semanticamente, questo layout mi sembra una tabella, quindi se hai davvero bisogno di usare questo layout, dovresti contrassegnarlo come una tabella. (Usa th per i titoli e le opzioni, td per le celle che contengono le caselle di controllo.)

Tuttavia, il modulo risultante sarà piuttosto difficile da usare. Nessuno del testo è adatto da usare come etichetta per ogni singola casella di controllo, quindi gli utenti saranno costretti a trovare & amp; fai clic sulla piccola area attiva della casella stessa.

Il mio suggerimento sarebbe di usare due gruppi di opzioni, in questo modo:

<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ì, questo significa ripetere parte del tuo testo, il che impedisce in qualche modo la manutenibilità; tuttavia, penso che per un modulo, l'usabilità dovrebbe superare la manutenibilità.

Answer 4

Le tabelle sarebbero il modo più semplice, ma le tabelle dovrebbero essere utilizzate per i dati come sappiamo.

Quindi userei una costruzione 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                                              |
+------------------------------------------------------------------------+

Tutto dovrebbe andare in un CSS. (Anche le definizioni di larghezza "inline" sopra)

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

Non sono sicuro che funzioni, lo proverei in questo modo.

EDIT: Ah, queste caselle sono "div", tra.