语义正确的HTML复选框列表

Question

我有一个HTML复选框列表，我希望以下列格式显示：

Click all that apply:
                                 Title A      Title B

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

我想知道在语义上编码这个的最佳方法是什么？

我见过相关问题关于语义正确的复选框，但这不考虑标题。

有什么想法吗？

Answer 1

标记的行和列？这几乎肯定是一个表是正确的事情。

想象一下，一旦用户做出选择并提交了表单，您就会将他们的选择显示给他们。使用表来显示收集的数据显然是正确的，因此使用表来显示收集数据的表单是正确的。

Answer 2

我建议表格是正确的语义结构，因为复选框的含义由它出现的行和列决定。

想想你将如何显示这组1和0：你会在表格中做到这一点。您所做的只是让细胞可编辑。

我比起撰写这篇文章时更加坚信。表格是正确的结构。

Answer 3

从语义上讲，这个布局在我看来就像一个表，所以如果你真的需要使用这个布局，你应该把它标记为一个表。 （对于标题和选项，使用th，对包含复选框的单元格使用td。）

但是，生成的表单将非常难以使用。这些文本都不适合用作每个复选框的标签，因此用户将被迫查找＆amp;单击复选框本身的微小活动区域。

我的建议是使用两组选项，如下：

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

是的，这意味着重复一些文本，这会在某种程度上妨碍可维护性;但是，我认为对于一种形式，可用性应该胜过可维护性。

Answer 4

表格是最简单的方法，但我们知道表格应该用于数据。

所以我使用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                                              |
+------------------------------------------------------------------------+

一切都应该进入CSS。 （也是上面的'内联'宽度定义）

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

我不确定这是否有效，我会这样试试。

编辑：啊，这些盒子是“div”，顺便说一句。