在表中设置HTML表单在语义上正确吗

Question

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

我经常用表格来构造表格。这在语义上正确吗？

我想知道这一点，因为表格布局（至少是我创建的表格）是合乎逻辑的，因为所有字段都有与字段中预期输入相对应的标签。然后，所获得的数据在语义上绝对正确地显示在表中。但形式是一样的吗
我觉得这是一个意见问题，但我很想听听人们在意见背后的推理。

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块。不过要小心，display:inline块是一个很好的参数，但它在浏览IE7-6时也有缺点（这并不奇怪）。

阅读这篇解释"内联块"的文章（英文）=>http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Answer 2

web标准项目提供了一个完整的教程，说明为什么以及如何避免使用html表单中的表。这是一本非常容易阅读并回答您所有问题的书：

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

Answer 3

这不仅仅是意见的问题，使用表格既有语义问题，也有实际问题。

一般来说，主要由label-input对组成的简单表单，例如今天在网站上看到的登录表单，不需要任何额外的标记，因为label和交互式表单元素将是语义方面所需要的全部。任何额外的标记都会被添加到行李中，给页面增加不必要的重量——CSS应该可以灵活地做几乎任何你想做的事情，并且fieldset可以用于表单不同部分的额外分离。

但是，即使你有一个显然是表的表单，你仍然应该首先考虑其他方法——混合表和表单存在可访问性问题，正如本文在24 Ways上所指出的那样。同一篇文章还展示了如何调整fieldset来做同样的工作，这无疑是一篇有趣的文章。

Answer 4

这听起来更像是"辩论"，而不是问答；A.然而，我一直觉得，任何需要表格结构的表单布局（数据网格/电子表格除外，根据定义，它们是表格）都是一种考虑不周的用户体验。复选框、标记输入等的集合都可以在不使用表的情况下更灵活地排列（语义上）。

Answer 5

我认为这取决于形式。有些表单作为一个表可能是有意义的——例如，有一系列键值对的表单：

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

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

然而，这样做并不是我的第一选择。由于每个表行/单元格的公告，表标记的存在将使使用屏幕阅读器收听变得更加困难。表中的一些语义信息（TH标头与行中TD的关联）实际上复制了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的子元素）与其输入关联的标签。这确实意味着你必须能够预测你的输入必须有多宽，而且由于所有文本都是右对齐的，所以左边缘参差不齐。

还有添加复选框和单选按钮的问题。在他们的情况下，将输入放在第一位，将标签放在第二位是有意义的；但以我举的例子来看，这不是很好。

那么，基本上？格式化表单是件令人头疼的事。尽管它们通常由作为表具有逻辑意义的名称-值对组成，但这种方法存在潜在的可访问性问题。对于这样的问题，我强烈希望避免使用基于表的解决方案，除非您有充分的理由使用表。