HTML <output> Tag

✂

<form onsubmit="return false" oninput="amount.value = (principal.valueAsNumber * rate.valueAsNumber) / 100">

<label for="principal">Amount to invest: $</label>
<input type="number" min="0" id="principal" name="principal" value="1000">
<p><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>Interest Per Annum: <strong>$<output name="amount" for="principal rate">0</output></strong></p>

</form>

The above example demonstrates usage of the <output> element.

The <output> element represents the result of a calculation or user action. For example, it could display the output of a user's interaction with a form element or it could be the results of a calculation performed by a script.

In the above example, the <output> element is used in a form to display the value of the slider (user interaction), as well as the calculated amount of interest earned based on variables provided by user input (output from script).