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.
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.
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.
output element can be located outside of a
<form> but still associated with one by using the
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>
Read more on the
output element from the following sources: