11

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

<form></form>将 CSS 应用于标签是否可以接受（根据 W3C 标准） ？谁能指出我在这个问题上的正确文学方向？

4

5 回答 5

17

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

它应该代表一种形式。那绝对是可见的东西

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

<div>是不得已而为之的标签。当不存在更合适的东西（如<form>or ）时使用它。<fieldset>

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

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

谁能指出我在这个问题上的正确文学方向？

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

我能想到的最接近的是来自 CSS 2.1 规范的警告：

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

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

于 2012-07-23T14:42:29.150 回答
4

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

于 2012-07-23T14:41:30.530 回答
1

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

于 2012-07-23T17:47:45.177 回答
1

在某些情况下设置表单标签的样式可能很有用。只要确保你让表单标签的行为就像它是一个层一样。没必要做 <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/

于 2012-07-23T16:12:14.713 回答
0

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

此外，SitePoint 有一篇关于样式化表单的相对较新的文章，它从样式化表单标签本身开始。

于 2012-07-23T14:45:08.280 回答