Ich habe eine HTML-Checkbox-Liste, die ich im folgenden Format anzeigen möchte:
%Vor%Ich frage mich, was der beste Weg, dies semantisch zu kodieren?
Ich habe eine verwandte Frage gesehen auf semantisch korrekte Checkboxen, aber dies berücksichtigt nicht die Titel.
Irgendwelche Ideen?
Markierte Zeilen und Spalten? Dies ist fast sicher ein Fall, wo eine Tabelle das Richtige ist.
Stellen Sie sich vor, dass, sobald der Benutzer seine Auswahl getroffen und das Formular abgeschickt hat, Ihnen die Auswahlmöglichkeiten wieder angezeigt werden. Es wäre offensichtlich richtig, eine Tabelle zu verwenden, um die gesammelten Daten anzuzeigen, so dass es korrekt ist, eine Tabelle zu verwenden, um das Formular anzuzeigen, das die Daten sammelt.
Ich würde vorschlagen, dass eine Tabelle die korrekte semantische Struktur dafür wäre, weil die Bedeutung eines Kontrollkästchens durch die Zeile und die Spalte bestimmt wird, in der es erscheint.
Überlegen Sie, wie Sie diese Menge von 1en und 0en anzeigen würden: Sie würden es in einer Tabelle tun. Sie machen nur die Zellen editierbar.
Ich bin noch mehr davon überzeugt, als ich diesen Beitrag geschrieben habe. Eine Tabelle ist dafür die richtige Struktur.
Semantisch sieht dieses Layout für mich wie eine Tabelle aus. Wenn Sie also wirklich dieses Layout verwenden müssen, sollten Sie es als Tabelle markieren. (Verwenden Sie th für die Titel und Optionen, td für die Zellen mit den Kontrollkästchen.)
Die resultierende Form wird jedoch ziemlich schwierig zu verwenden sein. Keiner der Texte eignet sich als Kennzeichnung für jedes einzelne Kontrollkästchen, so dass Benutzer gezwungen werden, & amp; Klicken Sie auf den kleinen aktiven Bereich des Kontrollkästchens selbst.
Mein Vorschlag wäre, zwei Gruppen von Optionen zu verwenden:
%Vor%Ja, das bedeutet, dass Sie einen Teil Ihres Textes wiederholen müssen, was die Wartbarkeit einigermaßen beeinträchtigt; Ich denke jedoch, dass Usability bei einer Form die Wartbarkeit übertrumpfen sollte.
Tabellen wären der einfachste Weg, aber Tabellen sollten für Daten verwendet werden, wie wir wissen.
Ich würde also eine div-Konstruktion verwenden:
%Vor%Alles sollte in ein CSS gehen. (Auch die 'inline' Weite Definitionen oben)
%Vor%Ich bin mir nicht sicher, ob das funktioniert, ich würde es so versuchen.
EDIT: Ah, diese Boxen sind "div" s, btw.
Tags und Links html semantics semantic-markup checkboxlist