The output HTML element was introduced in HTML5 and represents a calculated value belonging to a form. An example use case is client-side calculation on a shopping website's checkout page.
output vs samp
The purpose of output can be easily confused with that of the samp element; to represent a block of program output. The output element should not be used for this purpose.
Its name comes from the input element, since the typical use case for the element is to output the sum of several input element values. Perhaps something like computed would have been a more fitting name to reduce confusion.
Attributes
for
The for attribute can be used to create an explicit relationship between the result of the calculation and the elements that calculated it. Similar to the for attribute of the label element, the value is a space-separated list of IDs.
form
The output element can be located outside of a <form> but still associated with one by using the form attribute.
Usage
Simple example
This example uses the valueAsNumber property for convenience, which was also introduced in HTML5 to the HTMLInputElement DOM interface.
<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber;"> <input name="a" type="number"> + <input name="b" type="number"> = <output name="o"></output> </form>
Advanced example
See the Pen The by Daniel Imms (@Tyriar) on CodePen
Further reading
Read more on the output element from the following sources: