正确的HTML表单标记 [英] Correct HTML form markup

问题描述

我们正在讨论，因为我正在修复IE7错误，如< label> 和< input> 标签包装在< p> 中。

我似乎无法找到任何文档包含在< form> 标签中的标签的正确语义。例如，我倾向于使用以下内容：

 < form action =method =post> 
< fieldset> 
< div class =formrow> 
< label for =firstname>名字：< / label> 
< input type =textid =firstnamename =firstname/> 
< / div> 
< / fieldset> 
< / form> 
  

然而，看 Zurb基金会<​​/a>它们根本不会包装任何元素，可能是风格，但是对于 radio 和复选框他们将< input> 放入< label> 我认为这不是有效的。虽然Zurb页面正在使用 HTML5 ，所以它可能在那里有效？ $ b

Twitter Bootstrap 倾向于采用双重包装< div> 方式类似于我的。但他们也一样，在标签内包装广播和复选框输入。

因此，对于我的问题，是否存在关于< form> 标记内元素语义的任何明确规则？

$ b $如果你想知道哪些元素被允许作为表单元素的后代，我建议看一看

解决方案

/www.w3.org/TR/html4/interact/forms.htmlrel =nofollow>表单部分 HTML4规范（或者浏览相应的 HTML5部分）。

例如，任何内联元素都可以在< label> 。中：

 <！ELEMENT LABEL  -   - （％inline;）*  - （LABEL） - 表单字段标签文本 - > 
  

为什么输入元素在里面他们的标签元素是单击描述性文本也会切换复选框的状态。 Afaik可以通过正确设置属性的来实现。

We are having a discussion as I'm currently fixing an IE7 bug, as <label> and <input> tags were wrapped in a <p>.

I cannot seem to find any documentation for the correct semantics for tags contained in a <form> tag. I tend to use the following for example,

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

However, looking at the Zurb Foundation they don't wrap any elements at all, perhaps for style, but for radio and checkbox they put the <input> inside the <label> which I didn't think was valid. Although the Zurb page is using HTML5 so perhaps it's valid on there?

The Twitter Bootstrap tends to go with a double wrapped <div> approach similar to mine. But again they too, wrap the radio and checkbox inputs inside the label.

So, to my question, are there any definitive rules for the semantics of elements inside a <form> tag?

解决方案

If you want to know which elements are allowed to be descendants of form elements, I suggest to have a look at the forms section of the HTML4 specification (or go through the equivalent HTML5 section).

For example, any inline element is allowed inside <label>.:

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

The reason why the input elements are inside their label elements is that clicking the descriptive text also toggles the state of the checkboxes. Afaik you can achieve the same by setting the for attribute properly.

这篇关于正确的HTML表单标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！