Html 表单标签的CSS样式

据我所知，

标记作为网页的一部分应该是不可见的，在设计表单时，应该使用div标记（或等效标记）来表示物理表单结构

---

是否可以（根据W3C标准）将CSS应用于

标记？有人能给我指出关于这个问题的文献的正确方向吗？

表单只是页面的另一个元素（将其视为可以包含输入/其他元素的div）。你可以像其他元素一样用CSS来设计它的样式，这是完全有效的

据我所知，

标签作为网页的一部分应该是不可见的

它应该代表一种形式。这绝对是显而易见的

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

是最后的选择。当不存在更合适的东西（如

或

）时使用它

是否可以（根据W3C标准）将CSS应用于

标记

尽管浏览器中存在bug，但可以接受为文档中的任何元素设置样式

有人能给我指出这个问题上文学的正确方向吗

因为元素没有什么特殊之处，所以它不需要特定的文档

我能想到的最接近的是：

注意。CSS赋予“class”属性很大的权力，因此作者可以根据几乎没有关联表示的元素（如HTML中的DIV和SPAN）设计自己的“文档语言”，并通过“class”属性分配样式信息。作者应该避免这种做法，因为文档语言的结构元素通常具有公认的含义，而作者定义的类可能没有

---

…但是，与这个问题相关是一个延伸，因为您建议使用语义标记，但添加不必要的div纯粹是为了设置样式。

我想说是的，您可以像设置任何其他标记的样式一样设置表单的样式。我宁愿设计表单元素的样式，也不愿添加一个额外的div，因为我要尽量减少HTML

---

此外，SitePoint还提供了一个关于表单样式设置的功能，它从表单标记本身的样式设置开始。

在某些情况下，表单标记的样式设置是有用的。 只需确保将表单标记作为一个层。 没必要

只需执行表单{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>

---

示例：

一个

表单

元素可以像任何其他元素一样设置样式，并且它在浏览器默认样式表中有一些默认样式，请参见CSS 2.1规范。最重要的功能是，默认情况下，

表单

元素呈现为一个块，其上下边距对应于一条空行。（但在某些情况下，浏览器实际上会抑制这些页边距。）

是的，您可以设置样式。官方文献没有明确规定

表单

标记的样式，因为它只是另一个标记。只需执行

表单{display:block；}

…这是默认设置。一个常见的错误是使用div作为标签，然后失去可用性。-我完全赞成使用标签，但它们不是不使用适当块的理由。关闭CSS，内容将互相碰撞。为什么提交按钮标记为可选？它对数据收集过程不是很重要吗？正确，默认情况下表单标记是块元素，因此不需要规则。关闭CSS不会使内容相互碰撞。默认情况下，可以在所需行之间添加
。可选的字段集当然是微不足道的。“默认情况下，表单元素呈现为具有上下边距的块”在HTML5中仍然是这样吗？

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