正确的标签/输入格式的好处

Question

我正在把我的 html5/css3 和运行上的灰尘拍掉，变成让我好奇的东西。供考虑，这里有两个来自竞争文档的示例。

这两种形成 input/label 组的方式，尤其是在 HTML5 的 Windows Store App 中，是否对可维护性/设计等有好处？如果不能简洁地回答这个问题，请让我知道，并且可能只能通过意见争论，所以如果是的话，我可以删除问题。

因此来自 MS 文档；

<label class="a-label-class">
   <input id="option1" type="checkbox" class="a-input-class" />
   Option 1
</label>

来自其他文档；

<div>
   <input id="option1" class="a-input-class" name="option1" type="checkbox"/>
   <label for="option1" class="a-label-class">Option 1</label>
</div>

第一个示例标记较少。除了他们似乎完成了同样的事情。但是，第二个示例使用了 for 并且似乎使用 div 容器提供了更多的设计选项。

所以我的问题是，是否有一种方法出于特定原因在技术上更好？如果有的话，更好的方法有什么好处？谢谢！

Answer 1

这两种方法都被承认并且在语义角色上实际上是等价的。第一种分层方式与第二种DOM元素的组织方式一致，表现力更强，更简洁。无论如何，如果有用，下面的内容来自最权威的来源之一

来自 HTML 生活水平 — 最后更新于 7 月 20 日

The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using the for attribute, or by putting the form control inside the label element itself.

Except where otherwise specified by the following rules, a label element has no labeled control.

The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute's value must be the ID of a labelable element in the same Document as the label element. If the attribute is specified and there is an element in the Document whose ID is equal to the value of the for attribute, and the first such element is a labelable element, then that element is the label element's labeled control.

If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element's labeled control.

正确的标签/输入格式的好处

Proper Label / Input format benefits

html

css

input

windows-store-apps