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

我想由你来决定语义，但在我看来：

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

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

＆lt; label＆gt;中的“for”属性tag应引用＆lt; input＆gt;的“id”属性标签。请注意，当标签与字段关联时，单击标签会使关联的字段处于焦点。

您还可以使用＆lt; fieldset＆gt;等标签。将表单的各个部分聚集在一起并且＆lt; legend＆gt;标题字段集。

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

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

历史上，HTML将语义与格式混为一谈。字体标签和表格是最糟糕的例子。从格式化转移到CSS以及从XHTML中剥离许多纯格式化标签，有些地将意义与格式分离。通过将格式分离为CSS，您可以以多种不同的方式显示相同的HTML，为广泛的浏览器，小型移动浏览器，打印，纯文本等重新格式化...

对于启蒙，请访问CSS Zen Garden。

Answer 4

定义列表具有语义含义。它们用于列出术语（＆lt; dt＆gt;）及其相关定义（＆lt; dd＆gt;）。因此，在这种情况下，＆lt; dl＆gt;比表格更准确地描绘内容的语义。

Answer 5

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

想象一下，你必须向盲人阅读网页。你不会说“好的，我在这里有一个定义列表。第一个术语是'name'。”相反，您可能会说“好了，我们这里有一个表单，看起来有一个字段集，第一个输入是标记为'name'。“

这就是语义网很重要的原因。它允许页面内容准确地代表人类和技术。例如，有many browser plugins可帮助人们快速使用其标准信息（姓名，电话号码等）填写网络表单。如果输入没有相关标签，这些很难很好地工作。

希望有所帮助。

Answer 6

使用dl dt，dd表单只是构建表单的另一种方式，还有ul li，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 7

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

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

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

使用＆lt; dl＆gt;的部分原因用于标记表单是使用＆lt; dl＆gt;进行花哨的CSS布局技巧要容易得多。而不是＆lt; table＆gt;。另一部分是它更好地反映了表格的语义（标签/字段对的列表）而不是表格。

好吧，表讨厌也是其中的一部分。

Answer 9

几乎所有表单都是表格。你有没有看到一个不是表格的表格？我读过的指南建议使用表格标签进行表格显示，这正是形式，日历和电子表格的用途。现在他们使用DD和DT代替桌子？什么是网络？！ :)

Answer 10

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

Answer 11

表列表数据将如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

11 个答案: