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

Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables?

提问by cletus

I've come across a few examples recently that do things like:

我最近遇到了一些示例，它们执行以下操作：

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

for doing HTML forms. Why is that? What is the advantage over using tables?

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

回答by sjstrutt

I guess it's up to you to determine the semantics, but in my opinion:

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

Rather than a definition list, form-related properties should be used.

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

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

The "for" attribute in the <label> tag should reference the "id" attribute of a <input> tag. Note that when labels are associated with fields, clicking the label will put the associated field in focus.

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

You can also use tags like <fieldset> to cluster sections of a form together and <legend> to caption a fieldset.

您还可以使用诸如 <fieldset> 之类的标签将表单的各个部分聚集在一起，并使用 <legend> 来为字段集添加标题。

回答by Hauge

I've successfully used the technique outlined in this articleseveral times.

我已经多次成功地使用了本文中概述的技术。

I agree with sjstruttthat you should use form related tags like labeland formin you forms, but the HTML outlined in his example, will often lack some code you can use as "hooks" for styling your form with CSS.

我同意sjstrutt，你应该使用形式相关的标签，如label和form你形成，但在他的例子中列出的HTML，经常会缺少一些代码，您可以为“挂钩”使用与CSS样式表单。

As a consequence of this I markup my forms like this:

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

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

This approach leaves me with a comprehensible set of tags, which contains enough hooks to style the forms in a lot of different ways.

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

回答by Schwern

This is a subset of the issue of semantics vs formatting. A definition list says what they are, a list of related key/value attributes, but does not say how to display it. A table says more about layout and how to display the data then what the data inside is. It limits how the list can be formatted both by overspecifying the format and by underspecifying what it is.

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

HTML, historically, has mixed up semantics with formatting. Font tags and tables being the worst examples. The move to CSS for the formatting and the stripping of a lot of the pure formatting tags out of XHTML restores, somewhat, the separation of meaning from formatting. By separating formatting into CSS you can display the same HTML in many different ways reformatting it for a wide browser, a small mobile browser, printing, plain text, etc...

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

For enlightenment, visit the CSS Zen Garden.

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

回答by Jeremy Ricketts

In this case, labels and inputs areyour semantic meaning and they stand on their own.

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

Imagine you had to read the web page, out load, to a blind person. You wouldn't say "Okay, I have a list of definitionshere. The first termis 'name'." Instead, you'd probably say "Okay we have a formhere and it looks like the there's a set of fields, the first inputis labeled'name'."

想象一下，您必须向盲人阅读网页，然后将其输出。你不会说“好吧，我这里有一个定义列表。第一个术语是‘名字’。” 相反，你可能会说：“好吧，我们有一个形式，在这里，它看起来像有一个字段集，第一输入被标记为‘名’。”

This is why the semantic web is important. It allows the content of the page to represent itself accurately to both humans and technology. For example, there are manybrowserpluginsthat help people quickly fill out web forms with their standard information (name, phone number, etc). These rarely work well if inputs don't have associated labels.

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

Hope that helps.

希望有帮助。

回答by Bret

Definition lists have semantic meaning. They are for listing terms (<dt>) and their associated definitions (<dd>). Therefore in this case a <dl> portrays the semantic meaning of the content more accurately than a table.

定义列表具有语义意义。它们用于列出术语 (<dt>) 及其相关定义 (<dd>)。因此，在这种情况下，<dl> 比表格更准确地描绘了内容的语义。

回答by ak.

Using dldt,ddfor forms is just another way to structure your forms, along with ulli, divand table. You can always put a labelinto dt. This way you keep the form specific element labelin place.

使用dldt, ddfor 表单只是构建表单的另一种方式，以及ulli,div和table。您始终可以将 alabel放入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>

回答by Andrew G. Johnson

Definition lists are almost never used because semantically speaking they rarely show up on the internet.

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

In your case the correct code has been posted:

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

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

You are creating a form with inputs and labels for said inputs, you are not setting forth a list of words and defining them.

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

If you are doing some kind of help section then definition lists would be appropriate, e.g.:

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

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

回答by Theran

Part of the reason for using <dl> for marking up the form is that it is much easier to do fancy CSS layout tricks with a <dl> than a <table>. The other part is that it better reflects the semantics of the form (a list of label/field pairs) than a table would.

使用 <dl> 标记表单的部分原因是使用 <dl> 比使用 <table> 更容易做花哨的 CSS 布局技巧。另一部分是它比表格更好地反映了表单（标签/字段对列表）的语义。

Ok, table hate is part of it too.

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

回答by staticsan

Sometimes, a definition list simply presents the information in the way that's desired, whilst a table does not. Personally, I would probably not use a definition list for a form, unless it suits the style of the site.

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

回答by netrox

Virtually all forms aretabular. Do you ever see a form that's not tabular? The guidelines I've read suggested using the table tag for tabular presentation and that's exactly what forms, calendars, and spreadsheets are for. And now they're using DD and DT instead of tables? What is the Web coming to?! :)

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