Growing with the Web

output HTML element

Published
Tags:

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 <output> element by Daniel Imms (@Tyriar) on CodePen

Further reading

Read more on the output element from the following sources:

Comments

comments powered by Disqus
Like this article?
Subscribe for more!