语义正确的HTML复选框列表

标记的行和列?几乎可以肯定的是,表是正确的。

设想一下,一旦用户做出了选择并提交了表单,那么您将向他们显示他们的选择。显然,使用表来显示收集的数据是正确的,因此使用表来显示收集数据的表单是正确的。

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

想想你将如何显示这组1和0:你将在一个表中显示它。您所要做的就是使单元格可编辑。

我甚至比刚开始写这篇文章时更加确信。一张桌子就是这个的合适结构。

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

然而,结果表单将很难使用。所有文本都不适合用作每个复选框的标签,因此用户将被迫查找并单击复选框本身的微小活动区域。

我的建议是使用两组选项,如:

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

是的,这意味着重复一些文本,在某种程度上阻碍了可维护性;但是,我认为对于一个表单,可用性应该胜过可维护性。

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

所以我会使用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”s,btw。