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

我最近遇到了几个例子，这些例子是这样做的：

<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表单。 这是为什么？ 与使用表相比，有什么优势？

---

我想这是由你来确定的语义，但在我看来：

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

<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>标记字段集。

---

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

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

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

---

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

历史上，HTML将语义与格式混合在一起。 字体标签和表格是最差的例子。 转向CSS以格式化和剥离XHTML中的很多纯格式标签可以恢复，这在某种程度上意味着格式化与意义的分离。 通过将格式分隔为CSS，您可以通过多种不同的方式显示相同的HTML格式，从而为广泛的浏览器，小型移动浏览器，打印，纯文本等格式化它。

为了启发，请访问CSS Zen Garden。

链接地址: http://www.djcxy.com/p/15511.html

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

下一篇: Fill remaining vertical space with CSS using display:flex