Semantisch korrekte HTML-Checkbox-Listen

Question

Ich habe eine HTML-Checkbox-Liste bekam, Ich mag würde im folgenden Format angezeigt werden:

Click all that apply:
                                 Title A      Title B

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

Ich frage mich, was der beste Weg, dies semantisch zu codieren?

Ich habe eine Frage im Zusammenhang gesehen auf semantisch korrekte Kontrollkästchen, aber dies berücksichtigt nicht in die Titel.

Irgendwelche Ideen?

Answer 1

Die markierten Zeilen und Spalten? Dies ist fast sicher ein Fall, in dem eine Tabelle ist die richtige Sache.

Stellen Sie sich vor, dass, sobald der Benutzer seine Auswahl getroffen hat und das Formular ausgefüllt, Sie ihre Wahl dann zurück, um sie anzuzeigen. Es wäre eindeutig richtig sein, eine Tabelle zu verwenden, um die gesammelten Daten angezeigt werden, so ist es richtig, eine Tabelle zu verwenden, um das Formular anzuzeigen, das die Daten sammelt.

Answer 2

Ich werde vorschlagen, dass eine Tabelle die richtige semantische Struktur für diese sein würde, weil die Bedeutung eines Kontrollkästchen durch die Zeile und Spalte bestimmt wird, in dem es erscheint.

Denken Sie an, wie Sie diesen Satz von 1 und 0 angezeigt würde: Sie in einer Tabelle tun würde. Alles, was Sie tun, ist die Zellen bearbeitbar zu machen.

Ich bin noch mehr davon überzeugt, als wenn ich begann, diesen Beitrag zu komponieren. Eine Tabelle ist die richtige Struktur für diese.

Answer 3

Semantisch sieht das Layout für mich wie ein Tisch, so dass, wenn Sie wirklich dieses Layout verwenden müssen, sollten Sie es sich wie eine Tabelle markieren. (Verwenden th für die Titel und Optionen, td für die Zellen des Kontrollkästchen enthalten.)

Allerdings wird die resultierende Form ziemlich schwer zu bedienen. Keiner der Text ist geeignet als ein Etikett für jede einzelne Option zu verwenden, so dass die Nutzer zu finden und klicken Sie auf den kleinen aktiven Bereich des selbst Checkbox gezwungen werden.

Mein Vorschlag wäre, zwei Gruppen von Optionen zu verwenden, etwa so:

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

Ja, das bedeutet, es Texte zu wiederholen, die Wartbarkeit zu einem gewissen Grad behindert; aber ich denke, für eine Form, Usability sollte Trumpf Wartbarkeit.

Answer 4

Tabellen wäre der einfachste Weg, aber Tabellen sollten für Daten verwendet werden, wie wir sie kennen.

Also habe ich ein div Bau verwenden würde:

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

Alles soll in eine CSS gehen. (Auch die 'inline' width Definitionen oben)

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

Ich bin nicht sicher, ob das funktioniert, würde ich es so versuchen.

EDIT:. Ah, diese Boxen sind "div" s, btw