Question

我正在敲打我的html5 / css3上的灰尘并遇到让我惊讶的事情。这里有两个来自竞争文档的例子。

这两种形成输入/标签组的方式之间的可维护性/设计等是否有益处，尤其是在HTML5中的Windows应用商店应用中？如果这个问题不能简洁地回答，请告诉我，并且可能只是通过意见来辩论，所以我可以提出问题。

所以来自MS Docs;

<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日

label元素表示用户界面中的标题。该   标题可以与特定的表单控件相关联，称为   label元素的标记控件，使用for属性或by   将表单控件放在label元素中。

除以下规则另有规定外，还有标签   元素没有标记控制。

可以指定for属性以指示表单控件   哪个标题是关联的。如果指定了属性，   属性的值必须是。中可标记元素的ID   与标签元素相同的文档。如果指定了属性并且   Document中有一个元素，其ID等于   for属性，第一个这样的元素是一个可标记的元素，   然后该元素是标签元素的标记控件。

如果未指定for属性，但label元素有   labelable元素后代，然后树中的第一个这样的后代   order是标签元素的标记控件。

正确的标签/输入格式优势

1 个答案: