HTML output Tag

HTML output: Main Tips

• HTML output element displays the result of a calculation, which is typically performed using JavaScript.
• It is used along with the <form> and <input> elements.
• HTML output tag was newly introduced in HTML5 and supports all global attributes.

Usage of HTML Output Element

The content between output HTML tags represents a container where the result of a calculation may be displayed:

<form oninput="result.value=parseInt(x.value)+parseInt(y.value)">
  0<input type="range" id="x" value="75">100
  +<input type="number" id="y" value="72">
  =<output name="result" for="x y"></output>
</form>

Tag Attributes for <output>

The most crucial attributes used with HTML output tags are for and name. The first one specifies the elements used as inputs for the calculation, and the second one names the outputted element:

<form oninput="result.value=parseInt(x.value)+parseInt(y.value)">
  0<input type="range" id="x" value="75">100
  +<input type="number" id="y" value="25">
  =<output name="result" for="x y"></output>
</form>

If your HTML output element is associated with a form control, you can also use the form attribute. It defines the <form> element to which your <output> element belongs:

<form action="process.php" id="sum" oninput="result.value=parseInt(x.value)+parseInt(y.value)">
  0<input type="range" name="x" id="x" value="50">100
  +<input type="number" name="y" id="y" value="50">
  =<output name="result" for="x y"></output>
  <br>
  <input type="submit">
</form>

<output form="sum" name="result" for="x y"></output>

Browser support

Mobile browser support