Question

我有一个表单，列出输入的名称，输入，以及可能的一些帮助文本。它通常看起来是表格式的，但我不想使用table或div因为我认为现在有一个更符合语义的选项。

以下是没有样式的情况：

Name:    <name input>
Address: <address input>
         <address help info>
Phone:   <phone input>

注意它如何像桌子一样排列。

对于最合适的HTML的想法？

Answer 1

如果数据显示为表格，为什么表格在语义上不合适？使用表，问题，解决了。

Answer 2

一个真正的好问题，很难找到一个正确的答案。根据我的发现，table和div都可以。即使我同意他们中的任何一个感觉都不是一个真正好的解决方案。

表：

在http://www.w3.org/TR/html5/tabular-data.html#the-table-element，它说：

不应将表用作布局辅助工具。

...和...

HTML中的表格作为控制页面布局的一种方式，很难从这些文档中提取表格数据。

但是你并没有真正在这里使用表格进行布局。您将使用它以可读的方式呈现表单输入数据。如下面的句子所述（也见表格规范）：

table元素以表格的形式表示具有多个维度的数据。

对我来说，这意味着在这种情况下使用表格应该没问题。

的div

关于div W3规范说：

强烈建议作者将div元素视为最后的元素，因为当没有其他元素适合时。

但在阅读section规范时，它会说明div：

当一个元素仅用于样式目的或作为脚本编写的便利时，鼓励作者使用div元素。

对我而言，这意味着您还可以选择使用div进行样式设置或布局。我试图在这篇博文中提出一些关于使用div的想法：http://htmlusedtobeeasy.wordpress.com/2013/07/01/divisions-and-sections/

对不起，答案很长（我的第一个），希望有所帮助！

Answer 3

使用dl。它在HTML5中重新定义，因此它是一个“描述列表”而不是定义列表。

<dl>

  <dt>Name:</dt>
  <dd>…</dd>

  <dt>Address:</dt>
  <dd>…</dd>

  <dt>Phone:</dt>
  <dd>…</dd>

</dl>

如果是input的表单，请不要忘记使用label。

请注意，使用其他结构并非“必需”，因此如果没有dl / table，这样的表单就完全可以了：

<label for="form-name">Name:</label>
<input type="text" id="form-name" name="form-name">

<label for="form-address">Address:</label>
<textarea id="form-address" name="form-address"></textarea>

<label for="form-tel">Telephone:</label>
<input type="tel" id="form-tel" name="form-tel">

语义上适当的输入标题和字段标记

3 个答案:

表：

的div