Question

最好用一个例子来说明：

<label for="myInput">This is an external label</label>

<br>

<label>
This label is wrapped arround the input
<input type="text" id="myInput">
</label>

这在HTML5中是否正确？我知道多个标签可以指向一个输入字段，但标签只能指向一个字段。在示例中，它是两个指向同一输入的标签，只有一个围绕输入。

Answer 1

这在HTML5中是否正确？

是

我知道多个标签可以指向一个输入字段，但指向一个标签只能指向一个字段

是的，再次。

根据此处的规格：https://www.w3.org/TR/html5/forms.html#the-label-element

标题可以与特定的表单控件相关联，称为标签元素的标记控件，使用for属性，或者将表单控件放在标签元素本身内。

如果没有for属性且label与其可控制控件嵌套，则第一个这样的后代成为其可标记控件。但是，label不应与其他label嵌套。

label.control属性返回与此元素关联的表单控件。反之亦然，.labels是可标记控件的只读属性，它返回该控件上所有适用标签的nodelist。

示例1：

在下面的示例中，input.labels属性返回nodeList，其中包含两个标签。

＆＃13;

var inp = document.getElementById('myInput');
console.log(inp.labels);

＆＃13;

<label for="myInput">This is an external label</label>
<br>
<label>
  This label is wrapped around 
  <input type="text" id="myInput">
</label>

＆＃13;

示例2：

在这个例子中，我有意将一个标签与两个输入相关联。看到只有遇到的第一个（即for属性在此处关联，第二个被忽略，即使它具有嵌套控件。

＆＃13;

var myInput = document.getElementById('myInput'), 
    yourInput = document.getElementById('yourInput')
;
console.log(myInput.labels);
console.log(yourInput.labels);

＆＃13;

<label for="myInput">
	This is an external label
	<input id="yourInput">
</label>
<br>
<input type="text" id="myInput">

＆＃13;

其他标签内的输入标签 - 这是正确的

1 个答案: