3

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.

StayOnTarget
  • 11,743
  • 10
  • 52
  • 81
ranger gref
  • 49
  • 7

3 Answers3

2

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

Just a student
  • 10,560
  • 2
  • 41
  • 69
Kishor Velayutham
  • 818
  • 6
  • 18
  • 1
    In tag "label" it works as u explain, but in "output" it works smth else. – ranger gref Jan 31 '18 at 12:44
  • Just a element id. It specifies the relationship between the two id's. For ex: I'm just adding the two values and i need to store it in the result. I need to know,for what are the values are added up and stored. – Kishor Velayutham Jan 31 '18 at 12:54
  • A list of IDs of other elements, indicating that those elements contributed input values to (or otherwise affected) the calculation. – Kishor Velayutham Jan 31 '18 at 12:56
1

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.

Douwe de Haan
  • 6,247
  • 1
  • 30
  • 45
1

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>
Virender singh Rathore
  • 303
  • 2
  • 16