revision:
The <output> tag is used to represent the result of a calculation (like one performed by a script).The <output> HTML element is a container element, into which a site or app can inject the results of a calculation or the outcome of a user action.
for; value: element_id;
specifies the relationship between the result of the calculation, and the elements used in the calculation. A space-separated list of other elements' ids, indicating that those elements contributed input values to (or otherwise affected) the calculation.
form ; value: form_id;
specifies which form the output element belongs to.
name ; value: name;
specifies a name for the output element.
<output> ... results ... </output>
coding:
<form class="example" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">
+<input type="number" id="b" value="25">
=<output name="x" for="a b"></output>
</form>
coding:
<form class="example" oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="b" name="b" value="50" /> +
<input type="number" id="a" name="a" value="10" /> =
<output name="result" for="a b">60</output>
</form>
coding:
<form class="example" oninput="result.value = slider.value">
<input type="range" id="slider" value="25">
<br/><br />
The value is <output name="result" for="slider">25</output>
</form>
<form class="example" oninpvut="sumresult.value = parseInt(A.value)+ parseInt(B.value) + parseInt(C.value)">
<input type="number" name="A" value="50" /> +
<input type="range" name="B" value="0" /> +
<input type="number" name="C" value="30" />
<br>
Result: <output name="sumresult"></output>
</form>
<form class="example" oninput="n.value=parseInt(p.value)+parseInt(q.value)+parseInt(r.value)">0
<input type="range" id="p" value="25">100
+<input type="number" id="q" value="50">+<input type="number" id="r" value="50">
=<output name="n" for="p q r"></output>
</form>
code:
<form class="example" oninput = "sumresult.value = parseInt(z1.value)+parseInt(z2.value)+parseInt(z3.value)">
<input type = "range" name = "z1" value = "0" /> +
<input type = "number" name = "z2" value = "20" /> +
<input type = "number" name = "z3" value = "40" /><br />
The output is: <output name = "sumresult"></output>
</form>
The output element - practical applications
<form class="example" onsubmit="return false" oninput="amount.value =
(principal.valueAsNumber * rate.valueAsNumber) / 100">
<fieldset>
<legend style="font-weight:bold;">Interest calculator</legend>
<label for="principal">Amount to invest: $</label>
<input type="number" min="0" id="principal" name="principal" value="1000">
<p class="spec"><label for="rate">Interest rate: </label>
<input type="range" min="0" max="20" id="rate" name="rate" value="0"
oninput="thisRate.value = rate.value">
<output name="thisRate" for="rate">0</output><span>%</span></p>
<p class="spec">Interest received: <strong>$<output name="amount"
for="principal rate">0</output></strong></p>
</fieldset>
</form>
<form class="example" onsubmit="return false" oninput="totalamount.value =
Math.round(principal.value * (Math.pow((1 + interest.value / 100), period.value)) * 100) / 100;">
<fieldset>
Principal:<input name="principal" id="principal" type="number">(currency)
<br />
Duration:<input name="period" id="period" type="number">(month/year)
<br />
Interest rate:<input name="interest" id="interest" type="number">(percentage)
<br />
Total amount: <output name="totalamount" id="totalamount" for="principal period
interest"></output>(currency)
</fieldset>
</form>