The <output> element displays the result of a calculation or user action. It is commonly used inside of a <form> element to dynamically show the result of user input. However, the <output> element can be used on its own.


The result of 5 + 5 is <output name="operation-result">10</output>

The <output> element requires opening and closing tags that wrap around the result.


The <output> element takes the following attributes:

  • for indicates the id of one or multiple elements (separated by a space) whose values are factored in the calculation.
  • form indicates one or more forms the <output> element belongs to.
  • name indicates the name of the element.


The example form below features an <output> element displaying the slider value multiplied by two:

<head> </head>
oninput="result.value=parseInt(sliderInput.value)*2; document.querySelector('span').innerText=sliderInput.value"
<label for="slideInput" id="sliderValue">
Slider Value: <span> </span>
<input name="sliderInput" type="range" value="0" />
<label for="result"> Output (Slider value * 2): </label>
<output name="result" for="sliderInput" form="calculation-form"> </output>

Example of what the rendered text would look like

Edit this page on GitHub


Interested in helping build Docs? Read the Contribution Guide or share your feedback form.

Learn HTML on Codecademy