Output Element Using For and Form Attributes

suggest change

The following demo features an <output> element’s use of the [for] and [form] attributes. Keep in mind, <output> needs JavaScript in order to function. Inline JavaScript is commonly used in forms as this example demonstrates. Although the <input> elements are type="number", their values are not numbers, they are text. So if you require the values to be calculated, you must convert each value into a number using methods such as: parseInt(), parseFloat(), Number(), etc.

<!--form1 will collect the values of in1 and in2 on 'input' event.-->
<!--out1 value will be the sum of in1 and in2 values.-->    

<form id="form1" name="form1" oninput="out1.value = parseInt(in1.value, 10) + parseInt(in2.value, 10)">

<fieldset>

<legend>Output Example</legend>

  <input type="number" id="in1" name="in1" value="0">
<br/>
+
<input type="number" id="in2" name="in2" value="0">

</fieldset>

</form>

<!--[for] attribute enables out1 to display calculations for in1 and in2.-->
<!--[form] attribute designates form1 as the form owner of out1 even if it isn't a descendant.-->

<output name="out1" for="in1 in2" form="form1">0</output>

Feedback about page:

Feedback:
Optional: your email if you want me to get back to you:



Table Of Contents