What is the HTML "for" attribute in <output> tag?

Question

I can't understand for what for attribute in HTML5 new output tag, because result does not change depending on the presence of this attribute.

This question was asked in the year 2012 (HTML4), HTML5 appeared in 2014 and my question is not duplicate. Answer why attr "for" is in HTML4.

Answer 1

The for attribute specifies the relationship between the result of the calculation, and the elements used in the calculation. See MDN on label, MDN on output and W3Schools.

Examples

label tag

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

output tag

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

Now when the user clicks with the mouse on the username text the browser will automatically put the focus in the corresponding input field. This also works with other input elements such as <textbox> and <select> and <output>.

Answer 2

It don't do anything much it's just for getting better understanding about relationship among the inputs whom output is associated.

So other's can understand your code easily.

Refer below : It's same without for="x y" inside output.

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

Answer 3

As Mozilla Developer Network states:

A list of IDs of other elements, indicating that those elements contributed input values to (or otherwise affected) the calculation.

So it is just a list which could be used for semantic purposes.

W3schools does not offer a sufficient explanation about the for tag. Use MDN instead.