表单标签的CSS样式化

Question

据我所知，<form></form>标签在网页中应该是不可见的，当设计表单时，应使用div标签或等效标签来表示实际表单结构。

根据W3C标准，将CSS应用于<form></form>标签是否可接受？请问有哪些相关文献可以指导这个问题？

- Matthew Layton

---

是的，您可以对其进行样式设置。官方文献并没有明确为form标签设置样式，因为它只是另一个标签而已。 - Devin Burke

Answer 1

据我所知，<form></form>标签应该作为网页的一部分是不可见的。它代表一个表单，这是明显可见的内容。在设计表单时，应使用 div 标签（或等效标签）来表示物理表单结构。<div> 是最后的选择，仅当没有更合适的标签存在时才使用它，例如 <form> 或 <fieldset> 。

除了浏览器中的错误之外，可以接受对任何文档元素应用 CSS 样式，这符合 W3C 标准。由于该元素并没有特殊之处，因此不需要特定的文献资料。最接近的可能是 CSS 2.1 规范中的这个警告，但是将其与问题联系起来有些牵强，因为您建议使用语义化标记，但纯粹出于样式考虑添加不必要的 div 元素。

- Quentin

Answer 2

一个表单只是页面的另一个元素（可以把它看作是包含输入/其他元素的div）。你可以像任何其他元素一样使用CSS对其进行样式设置 - 这完全有效。

- whostolemyhat

Answer 3

一个form元素可以像其他元素一样进行样式设置，并且在浏览器默认样式表中有一些默认样式，详见CSS 2.1规范中的HTML 4默认样式表。最重要的特点是，默认情况下，form元素被呈现为一个块级元素，其顶部和底部边距对应于空行。（尽管在某些情况下，浏览器实际上会抑制这些边距。）

- Jukka K. Korpela

---

“默认情况下，表单元素呈块状，并带有顶部和底部边距。”这在HTML 5中是否仍然适用？ - Mori

Answer 4

在某些情况下，样式化表单标签可能会很有用。 只需确保将表单标签作为图层进行操作即可。 不需要执行 <div id="myform"><form></form></div>

只需执行 form {display:block;}，它就会像 div 一样运行。

关于语义和正确性： 常见的错误是使用 div 作为标签，然后失去了可用性。

使用 HTML 设计的方式！ 例如，这是一个基本表单在 HTML 中的标准外观。

<form method="post" action="http://www.someurl.com/formHandler.php">
    <fieldset>
        <legend>Personal info</legend>
        <label for="name">Name:</label>
        <input type="text" id="name" class="text" />
        <label for="email">Email</label>
        <input type="text" id="email" class="text" />
    </fieldset>
    <fieldset>
        <legend>Optional</legend>
        <label for="info">Comments?</label>
        <textarea id="info"></textarea>
        <input type="submit" value="submit" class="submit" />
    </fieldset>
</form>

使用这种HTML可以让用户点击标签或按Tab键来获得所需字段的焦点。

样式化可能有些棘手，但是如果您知道自己在做什么，就不需要太多代码。

form { display:block; background-color: #9e9e9e; padding: 20px; width: 540px; /*200 + 300 + (20 * 2)*/ }
legend { font-weight: bold; }
label { display: inline-block; width: 200px; float: left; clear: left; }
input.text { display: block; width: 300px; float: left; }
input.submit { margin:20px 0 0 200px; width: auto; }

例子：http://jsfiddle.net/tive/BB85w/

- Tim Vermaelen

---

只需执行 form {display:block;} … 这是默认设置。 - Quentin

一个常见的错误是使用div作为标签，然后失去了可用性。我完全赞成使用标签，但这并不意味着不能使用适当的块。关闭CSS，内容将会重叠在一起。 - Quentin

为什么提交按钮被标记为可选项？它不是数据收集过程中非常重要的一部分吗？ - Quentin

正确，表单标签默认是块级元素，因此不需要该规则。关闭CSS并不会使内容互相重叠。您可以在要作为默认值的行之间添加<br />。可选的fieldset当然只是琐事。 - Tim Vermaelen

Answer 5

我觉得可以的，你可以像样式化其他标签一样对表单进行样式化。 我更愿意样式化表单元素，而不是添加额外的div，因为我尽量保持我的HTML尽可能简洁。

此外，SitePoint有一篇关于样式化表单的比较新的文章，其中首先开始样式化表单标签本身。

- Ana