Sunday 8 December 2013

The output element

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.



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.


The output element can be located outside of a <form> but still associated with one by using the form attribute.


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>

Advanced example

See the Pen The element by Daniel Imms (@Tyriar) on CodePen

Further reading

Read more on the output element from the following sources: