在HTML中，将表单放在表格中是语义上正确的吗？

Question

我们都知道使用表格作为布局辅助是错误的。

我经常使用表格来构建表单。 这样做在语义上是否正确？

我想知道这个问题，因为将表单放在表格布局中是有逻辑的（至少是我创建的表单），因为所有字段都有与字段中预期输入相对应的标签。 然后获取的数据肯定会以语义正确的方式显示在表格中。 但是对于表单来说是否也是一样的呢？ 我感觉这是一个意见问题，但我很想听听人们对自己意见背后的推理。

- Richard

---

我们都知道使用表格作为布局辅助是错误的。我不知道这一点。你应该使用最简单和有效的方法。 - Steve Wellens

如果您查看HTML5规范，它确实以那些措辞说到：http://www.w3.org/wiki/HTML/Elements/table - Richard

哇，依我之见，规格书有误。 - Steve Wellens

@Steve https://dev59.com/K3VD5IYBdhLWcg3wHnwX - Yi Jiang

Answer 1

编辑：感谢@Will Martin。

实际上，我检查了一下，在w3c标准文档中使用表格来构建表单是符合语义的，因为它可以在此处显示：http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1

============

昨天我读了一篇文章（不幸的是法语），基本上说你不应该使用表格来构建表单。（http://www.alsacreations.com/article/lire/1209-display-inline-block.html）

它没有说明为什么不应该这样做，但是它说你应该使用display:inline-block。不过要小心，display:inline-block是一个很好的参数，但在IE7-6浏览器中会有缺陷（毫不奇怪）。

阅读这篇解释“inline-block”的英文文章=> http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

- Jibou

---

将标签与输入框分离是可以的，只要使用FOR和ID属性明确关联这两者即可。 - Will Martin

HTML5标准草案还包含在表格内使用表单元素的示例：http://www.w3.org/TR/2012/CR-html5-20121217/forms.html#attr-input-readonly。 - Big McLargeHuge

Answer 2

网络标准项目已经发布了一份完整的教程，介绍了在HTML表单中避免使用表格的原因和方法。这篇文章非常易懂，回答了你所有的问题。

http://www.webstandards.org/learn/tutorials/accessible-forms/

- mathijsbrand

---

那是一个好链接。这表明使用表格时会出现可访问性问题，就像他们的示例一样，幸运的是我没有像那样使用它们，我正在使用Jibou的答案中所述的方式，这是正确的方式（也包括FOR和ID），因此屏幕阅读器应该没有问题地逻辑解释表单。谢谢。 - Richard

Answer 3

这取决于表格的形式。我认为有些表格可以作为表格呈现--例如，当您拥有一系列键值对时：

<table>
<tr>
    <th scope="row"><label for="first-name">First Name:</label></th>
    <td><input type="text" name="first_name" id="first-name" /></td>
</tr>
<tr>
    <th scope="row"><label for="last-name">Last Name:</label></th>
    <td><input type="text" name="last_name" id="last-name" /></td>
</tr>
<tr>
    <th scope="row"><label for="color">Favorite Color:</label></th>
    <td><input type="text" name="color" id="color" /></td>
</tr>
</table>

使用对应于相关INPUT的ID的FOR属性组合LABEL元素意味着屏幕阅读器将能够合理地阅读表单。 我添加了TH元素来指示表格中LABEL单元格和INPUT单元格之间的语义关系。

但是，那样做不会是我的首选。表格标记的存在将使使用屏幕阅读器更加费力，因为需要宣布每个表格行/单元格。表格中的一些语义信息（TH标题与行中的TDs的关联）实际上重复了LABEL和INPUT之间的语义链接，因此使用屏幕阅读器时，您可能会听到有关如何相关这些内容的相同信息两次。

相反，我会这样做：

<style type="text/css">
label { display: block; text-align: right; }
label input { width: 100px; }
</style>

<label for="first-name">First Name: <input type="text" name="first_name" id="first-name" /></label>

<label for="last-name">Last Name: <input type="text" name="last_name" id="last-name" /></label>

<label for="color">Favorite Color: <input type="text" name="color" id="color" /></label>

这样做可以用更少的HTML实现相同的效果。它将标签与其输入相关联，既明确（使用FOR/ID），又隐含（因为INPUT是LABEL的子元素）。这意味着您必须能够预测输入的宽度，而且由于所有文本都是右对齐的，左边缘会有不整齐的边缘。

还有添加复选框和单选按钮的问题。在它们的情况下，最好先放置输入，然后再放置标签；但是，在我给出的示例中，这看起来并不好。

所以，基本上？格式化表单很烦人。虽然它们通常由名称-值对组成，这些对作为表格在逻辑上是有意义的，但这种方法存在潜在的可访问性问题。除非您有充分的理由使用表格，否则我强烈建议避免基于表格的解决方案。

- Will Martin

---

不确定为什么这个答案被踩了...点个赞以平衡一下。 - Big McLargeHuge

Answer 4

这不仅仅是一个观点问题 - 在使用表格与表单时，存在语义和实际问题。

一般来说，简单的表单主要由-对组成，例如今天网站上看到的登录表单，不需要任何额外的标记，因为和交互式表单元素就足以满足语义需求。任何额外的标记都会增加页面的负担，给页面增加不必要的重量 - CSS应该具有灵活性，可以做几乎任何您想要的事情，而

可用于进一步分离表单的不同部分。

但即使您有一个明显是表格的表单，您仍应首先考虑其他方法 - 混合表格和表单存在无障碍问题，如this article on 24 Ways中所示。同一篇文章还展示了如何改用

来完成相同的工作，并且绝对值得一读。

- Yi Jiang

Answer 5

这更像是“辩论”而不是问答。然而，我一直认为任何需要表格结构的形式布局（除了数据网格/电子表格之外，它们本质上就是表格）都是一个思考不周的用户体验。复选框集合、标记输入等都可以更灵活地（并且语义化地）排列，而无需使用表格。

- bgun