什么是HTML＆＃34; for＆＃34; <output>标签中的属性？

Question

我无法理解HTML5新输出标记中的for属性，因为结果不会因此属性的存在而发生变化。

This question是2012年（HTML4），HTML5出现在2014年，我的问题根本不重复。答案为attr＆＃34; for＆＃34;在HTML4中是错误的。

Answer 1

for属性指定计算结果与计算中使用的元素之间的关系。请参阅MDN on label，MDN on output和W3Schools。

实施例

label标记

<label for="username">Username</label>
<input type="text" id="username" name="username" />

output标记

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100 +
  <input type="number" id="b" value="50"> =
  <output name="x" for="a b"></output>
</form>

现在，当用户在用户名文本上单击鼠标时，浏览器将自动将焦点放在相应的输入字段中。这也适用于其他输入元素，例如<textbox>和<select>以及<output>。

Answer 2

正如Mozilla开发者网络所说：

  

其他元素的ID列表，表示这些元素为计算提供了输入值（或以其他方式影响）。

因此它只是一个可用于语义目的的列表。

W3schools没有提供有关for标签的充分说明。请改用MDN。

Answer 3

它只是为了更好地理解与输出相关的输入之间的关系，而不是做什么

。

因此，其他人可以轻松理解您的代码。

  

请参阅下文：在输出中没有 for =＆＃34; x y＆＃34; 时相同。

＆＃13;

＆＃13;

<form oninput="z.value=parseInt(x.value)+parseInt(y.value)">
<label>First Value</label>
<input type="number" id="x" >
<label>Second Value</label>
<input type="number" id="y">
<label>Result :</label>
<output name="z"></output>
</form>

＆＃13;

＆＃13;

＆＃13;