如果w3.org HTML5表单规范在父<label>中嵌入<input>,为什么大多数页面都将它们作为兄弟姐妹实现？

Question

我一直在阅读w3.org HTML5表单规范,并惊讶地看到以下HTML:

<p><label>Customer name: <input name="custname"></label></p>
<p><label>Telephone: <input type=tel name="custtel"></label></p>
<p><label>E-mail address: <input type=email name="custemail"></label></p>

从语义上讲,这让我很困惑.<label>作为一个兄弟姐妹<input>而不是作为其父母,不会更有意义吗？

在野外,我更习惯于看到以下配置:

<p>
  <label for="customer_name">Customer name:</label>
  <input id="customer_name" name="customer[name]">
</p>

我知道那里的大部分标记都是格式错误的,但我很想听听别人对正确惯例的看法.

我的立场得到了纠正,但似乎我使用过的每个标记生成器和表单助手都违反了W3的建议 - 即使是那些声称支持HTML5,使用客户端验证等的建议.

思考？

Answer 1

根据规范,这两种形式都是有效的:

可以指定for属性以指示与标题相关联的表单控件.如果指定了该属性,则该属性的值必须是与label元素在同一Document中的可自由格式关联元素的ID.如果指定了属性并且Document中有一个元素,其ID等于for属性的值,并且第一个这样的元素是一个可标记的表单关联元素,那么该元素是标签元素的标记控件.

如果未指定for属性,但label元素具有可谓的表单关联元素后代,则树顺序中的第一个此类后代是标签元素的标记控件.

您可以使用嵌套(如果这对您的标记有意义),或者如果您不能使用隐式嵌套,则可以使用for属性.两者都不比另一个更正确或更不正确.我认为大多数人都喜欢使用for属性,因为通过允许两个元素彼此分离,这给了作者最大的灵活性.