Question

由于<label>和<input>标记包含在<p>中，我们正在讨论IE7错误，因为我正在修复IE7错误。

我似乎无法找到<form>标记中包含的标记的正确语义的任何文档。我倾向于使用以下代码，

<form action="" method="post">
  <fieldset>
    <div class="formrow">
      <label for="firstname">Firstname:</label>
      <input type="text" id="firstname" name="firstname" />
    </div>
  </fieldset>
</form>

但是，查看Zurb Foundation它们根本不包含任何元素，可能是为了样式，但对于radio和checkbox，它们将<input>置于其中我认为没有的<label>是有效的。虽然Zurb页面正在使用HTML5所以它可能在那里有效吗？

Twitter Bootstrap往往采用类似于我的双重<div>方法。但同样，他们也将radio和checkbox输入包装在标签内。

那么，就我的问题而言，<form>标签内元素的语义是否存在明确的规则？

Answer 1

如果您想知道哪些元素可以作为表单元素的后代，我建议您查看forms section的HTML4 specification（或查看等效的HTML5 section ）。

例如，any inline element is allowed inside <label>.：

<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->

input元素位于label元素内部的原因是单击描述性文本也会切换复选框的状态。 Afaik您可以通过正确设置for属性来实现相同目的。

Answer 2

您应该按照此处所述使用它：http://www.w3schools.com/html5/tag_fieldset.asp 例如：http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_fieldset

您可以选择将输入字段的“描述”包装到

中

<label>

元素。

<label for="name_of_inputfield">Name:</label>

注意使用

是一种很好的风格

<legend>

标记，如果您使用的是

<fieldset>

Answer 3

示例标记无效XHTML 1.0，因为fieldset元素不包含必需的图例元素。在HTML5中，它是正确的，但不允许action =“”属性（动作属性值不能为空）。

但实际上，fieldset标记是没有意义的 - 该元素对于分组字段很有用，但样本不包含组外的字段。尽管XHTML 1.0 Strict规则要求，但div标记也是多余的。但实际形式可能不同。如果你有几个“行”，正如类名“formrow”所暗示的那样，则表格元素是最佳标记的几率。

将一个字段及其标签包装在容器元素中有三个原因：要满足HTML 4.01 Strict和XHTML 1.0严格规则（要求表单中的任何内容都包含在块级容器中），以使其成为可以将它们作为一个整体进行样式化，并使它们更容易在客户端脚本中将它们视为一个单元。对于这样的包装，

div是一个语义上空的元素，通常很方便
fieldset可能是合乎逻辑的，但需要旧规则的图例，默认情况下会创建一种特殊的边框
p可以通过HTML5规则（它自由地解释段落的概念），但与div相比，它几乎没有赢得任何东西，相反，它可能意味着默认的上下边距太大。

更正HTML表单标记

3 个答案: