为什么使用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

我想由你来决定语义,但在我看来:

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

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

<label>标记中的"for"属性应引用<input>标记的"id"属性.请注意,当标签与字段关联时,单击标签会使关联字段处于焦点.

您还可以使用<fieldset>等标记将表单的各个部分聚集在一起,使用<legend>标记字段集.

Answer 2

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

我同意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

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

想象一下,你必须向盲人阅读网页.你不会说"好的,我这里有一个定义列表.第一个术语是'名字'." 相反,你可能会说"好吧,我们这里有一个表格,看起来有一组字段,第一个输入被标记为 '名字'."

这就是语义网很重要的原因.它允许页面内容准确地代表人类和技术.例如,有许多 浏览器 插件可以帮助人们快速填写Web表单及其标准信息(姓名,电话号码等).如果输入没有相关标签,这些很难很好地工作.

希望有所帮助.

Answer 5

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

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

定义列表几乎从未使用过，因为从语义上讲，它们很少出现在Internet上。

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

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