语义正确的HTML复选框列表

Question

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

选择所有适用项：
                                 标题 A      标题 B
选项 1                          [  ]         [  ]
选项 2                          [  ]         [  ]
选项 3                          [  ]         [  ]

我想知道编写这种语义化代码的最佳方法是什么？

我已经看到了一个关于语义正确的复选框的 相关问题，但这没有考虑标题。

有什么想法吗？

- Sniffer

---

顺便提一下，它应该提示“选择所有适用项”。 - Sinan Ünür

Answer 1

标记为行和列的数据？这几乎肯定是使用表格的情况。

想象一下，一旦用户完成选择并提交表单，您会将他们的选择显示给他们。 显然使用表格来显示收集的数据是正确的，所以使用表格来显示收集数据的表单也是正确的。

- NickFitz

---

好的。我明白为什么可以使用表格。我该如何语义化地创建它呢？类似下面的方式（见下一条评论）？是否有规定任何输入都必须有一个标签与之相关联，或者表格中的标题就足够了？谢谢。 Sniffer - Sniffer

<table> <thead> <tr> <th axis="options"></th> <th axis="title1">标题 1</th> <th axis="title2">标题 2</th> </tr> </thead> <tbody> <tr> <td headers="options" axis="option1">选项 1</td> <td headers="option1 title1"><input id="option1_title1" type="checkbox" value="checked" /></td> <td headers="option1 title2"><input ... /></td> </tr>
<tr> <td headers="options" axis="option2">选项 2</td> <td headers="option2 title1"><input ... /></td> <td headers="option2 title2"><input ... /></td> </tr> <tr> ... </tr> </tbody>
</table> - Sniffer

很抱歉 - 这并不太好。 如果你在谈论代码的话，600个字符的限制有点过于局限了（虽然我理解短注释背后的原因）。 - Sniffer

并没有规定输入必须有标签，但是有标签可以极大地提高可用性。许多人很难准确控制鼠标，点击复选框的微小活动区域是一个大问题。 - Martha

Answer 2

我建议使用表格作为正确的语义结构，因为复选框的含义取决于它所在的行和列。

想象一下如何显示这组1和0：你会用表格来展示。你所做的只是让单元格可编辑。

我比开始写这篇文章时更加确信了。表格是这个问题的正确结构。

- Sinan Ünür

Answer 3

从语义上来看，我认为这种布局像一个表格，所以如果你确实需要使用这种布局，应该将其标记为表格。(对于标题和选项，请使用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>

是的，这意味着需要重复一些文本内容，这在一定程度上会影响可维护性；然而，我认为对于一个表单来说，可用性应该优先于可维护性。

- Martha

---

嗨，玛莎这是我最初尝试标记它的方式，但我可以理解为什么它会被视为表格数据，因此我在上面留下了评论。 - Sniffer

哦，毫无疑问，您发布的布局是表格形式的 - 请参见我的答案第一段。只是在我看来，这样的布局使得表单难以使用，因为没有可点击的文本。（它可能在可访问性方面也存在问题；正确使用表格标记有所帮助，但屏幕阅读器本质上更难解析表格。） - Martha

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中。（包括上面的“inline”宽度定义）

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

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

编辑：顺便说一下，这些框是“div”。

- cimnine