Question

据我所知，<form></form>标签应该作为网页的一部分不可见，并且在设计表单时，应该使用div标签（或等效标签）来表示物理表单结构

将CSS应用于<form></form>标记是否可接受（根据W3C标准）？在这个问题上，有没有人能指出我正确的文献方向？

Answer 1

据我所知，<form></form>标记应该作为网页的一部分不可见

它应该代表一种形式。这绝对是可见的事情

并且在设计表单时，应该使用div标签（或等效的）来表示物理表单结构。

<div>是最后的标签。当更合适的东西（如<form>或<fieldset>）不存在时使用它。

将CSS应用于<form></form>标记是否可接受（根据W3C标准）？

在浏览器中出现错误，可以为文档中的任何元素设置样式。

并且有人能指出我在这个问题上的正确方向吗？

由于该元素没有什么特别之处，因此不需要特定的文档。

我能想到的最接近的是this warning from the CSS 2.1 specification：

请注意。 CSS为“类”属性提供了如此强大的功能，作者可以设想基于几乎没有相关表示的元素（例如HTML中的DIV和SPAN）设计自己的“文档语言”，并通过“类”属性分配样式信息。作者应该避免这种做法，因为文档语言的结构元素通常具有公认和接受的含义，作者定义的类可能没有。

...但是，由于您建议使用语义标记，但是将其与问题联系起来是一个延伸，但是仅仅为了样式添加不必要的div。

Answer 2

表单只是页面的另一个元素（将其视为可以包含输入/其他元素的div）。您可以像使用任何其他元素一样使用CSS设置样式 - 它完全有效。

Answer 3

在某些情况下为表单标记设置样式可能很有用。只需确保将表单标记视为图层。没必要 <div id="myform"><form></form></div>

只需要表单{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/

Answer 4

form元素可以像任何其他元素一样设置样式，并且在浏览器默认样式表中有一些默认样式，请参阅CSS 2.1规范中的Default style sheet for HTML 4。最重要的特性是，默认情况下，form元素将呈现为一个块，其顶部和底部边距对应于空行。（但浏览器在某些情况下实际上会抑制这些边距。）

Answer 5

我会说是的，你可以像对待任何其他标签的样式一样设置表单样式。我宁愿设置表单元素的样式，而不是添加额外的div，因为我试图保持HTML最小化。

此外，SitePoint有一个关于样式表单的relatively recent article，它从样式标签本身的样式开始。

表单标签的CSS样式

5 个答案: