为什么对 HTML 表单而不是表格使用定义列表（DL、DD、DT）标签？

Question

我最近遇到了一些例子，它们的作用如下：

<dl>
  <dt>Full Name:</dt>
  <dd><input type="text" name="fullname"></dd>
  <dt>Email Address:</dt>
  <dd><input type="text" name="email"></dd>
</dl>

用于制作 HTML 表单。这是为什么？与使用表格相比有什么优势？

Answer 1

表格列表数据会是这样的：

<table>
<tr>
	<td class="title">Name: </td>
	<td class="text">John Don</td>
</tr>
<tr>
	<td class="title">Age: </td>
	<td class="text">23</td>
</tr>
<tr>
	<td class="title">Gender: </td>
	<td class="text">Male</td>
</tr>
<tr>
	<td class="title">Day of Birth:</td>
	<td class="text">12th May 1986</td>
</tr>
</table>

您可以像这样使用 DL、DT、DD 标签列表数据：

<dl>
	<dt>Name: </dt>
	<dd>John Don</dd>
	
	<dt>Age: </dt>
	<dd>23</dd>
	
	<dt>Gender: </dt>
	<dd>Male</dd>
	
	<dt>Day of Birth:</dt>
	<dd>12th May 1986</dd>
</dl>

Answer 2

我已经多次成功使用this article 中概述的技术。

我同意 sjstrutt 的观点，即您应该在表单中使用与表单相关的标签，例如 label 和 form，但是他的示例中概述的 HTML 通常会缺少一些您可以用作使用 CSS 设置表单样式的“钩子”。

因此，我这样标记我的表单：

<form name="LoginForm" action="thispage">
    <fieldset>
        <legend>Form header</legend>
        <ul>
            <li>
                <label for="UserName">Username: </label>
                <input id="UserName" name="UserName" type="text" />
            </li>
            <li>
                <label for="Password">Password: </label>
                <input id="Password" name="Password" type="text" />
            </li>
        </ul>
    </fieldset>
    <fieldset class="buttons">
        <input class="submit" type="submit" value="Login" />
    </fieldset>
</form>

这种方法给我留下了一组易于理解的标签，其中包含足够多的钩子以多种不同的方式设置表单样式。

Answer 3

将dldt,dd 用于表单只是构造表单的另一种方式，以及ulli、div 和table。您可以随时将label 放入dt。这样您就可以将表单特定元素 label 保留在适当的位置。

<form action="/login" method="post"> 
    <dl>
        <dt><label for="login">Login</label></dt>
        <dd><input type="text" name="login" id="login"/></dd>
        <dt><label for="password">Password</label></dt>
        <dd><input type="password" name="password" id="password"/></dd>  
        <dd><input type="submit" value="Add"/></dd>
    </dl>
</form>

Answer 4

几乎从不使用定义列表，因为从语义上讲，它们很少出现在互联网上。

在您的情况下，已发布正确的代码：

<form>
    <label for="fullname">Full Name:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="email">Email Address:</label>
    <input type="text" name="email" id="email">
</form>

您正在为所述输入创建一个带有输入和标签的表单，而不是列出单词列表并定义它们。

如果您正在做某种帮助部分，那么定义列表将是合适的，例如：

<dl>
    <dt>HTML</dt>
    <dd>Hypertext Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascade Stylesheets</dd>
    <dt>PHP</dt>
    <dd>Hypertext Preprocessor</dd>
</dl>

Answer 5

我想这取决于你来确定语义，但在我看来：

应该使用与表单相关的属性，而不是定义列表。

<form>
  <label for="fullname">Full Name:</label>
  <input type="text" name="fullname" id="fullname">
  <label for="email">Email Address:</label>
  <input type="text" name="email" id="email">
</form>

标签中的“for”属性应该引用 标签的“id”属性。请注意，当标签与字段关联时，单击标签将使关联的字段成为焦点。

您还可以使用

等标签将表单的各个部分聚集在一起，并使用

为字段集添加标题。

Answer 6

几乎所有的表格都是表格的。你见过不是表格的表格吗？我读过的指南建议使用表格标签进行表格展示，而这正是表格、日历和电子表格的用途。现在他们使用 DD 和 DT 而不是表？网络是什么来的？！ :)

Answer 7

在这种情况下，标签和输入是您的语义含义，它们独立存在。

想象一下，您必须阅读网页，将网页加载给盲人。您不会说“好的，我在这里有一个定义列表。第一个术语是'名称'。”相反，您可能会说“好的，我们这里有一个 form，看起来有一个 字段集，第一个 input 是标记“名字”。”

这就是语义网很重要的原因。它允许页面的内容准确地向人类和技术展示自身。例如，manybrowserplugins 可以帮助人们使用标准信息（姓名、电话号码等）快速填写 Web 表单。如果输入没有关联的标签，这些很少能很好地工作。

希望对您有所帮助。

Answer 8

有时，定义列表只是以所需的方式呈现信息，而表格则不然。就个人而言，我可能不会对表单使用定义列表，除非它适合网站的风格。

Answer 9

使用

来标记表单的部分原因是使用

比 更容易做花哨的 CSS 布局技巧。另一部分是它比表格更能反映表单的语义（标签/字段对列表）。

好吧，餐桌仇恨也是其中的一部分。

【讨论】：

Answer 10

这是语义与格式问题的一个子集。定义列表说明了它们是什么，相关键/值属性的列表，但没有说明如何显示它。一张表更多地说明了布局以及如何显示数据，然后是里面的数据。它通过过度指定格式和未指定格式来限制列表的格式。

HTML 在历史上一直将语义与格式混为一谈。字体标签和表格是最糟糕的例子。转向 CSS 进行格式化以及从 XHTML 中去除大量纯格式化标签在某种程度上恢复了含义与格式化的分离。通过将格式分离为 CSS，您可以以多种不同的方式显示相同的 HTML，为宽浏览器、小型移动浏览器、打印、纯文本等重新格式化...

如需启蒙，请访问CSS Zen Garden。

Answer 11

定义列表具有语义含义。它们用于列出术语 (

) 及其相关定义 (

)。因此，在这种情况下，

比表格更准确地描述了内容的语义。