HTML and CSS Reference
The output element displays the result of a calculation in a form, such as a total price in a virtual shopping
cart, or an interest rate adjusted for a credit score. In the past, web developers usually used an input
type= " text " to display such results, but HTML5 has added the output element as a more appropriate
counterpart to the input element—especially complementary to the new number input type. The output
element by itself doesn't do much, but it's a much more semantically meaningful and accessible alternative
to an input element or a generic span or div .
Listing 8-25 shows a simple calculation form, adding two number inputs to arrive at a total, to be displayed
event handler in the form's start tag); these elements can't perform any calculations on their own. The
output element's optional for attribute carries the IDs of the two controls that contributed to its value,
establishing a semantic link and aiding accessibility.
Listing 8-25. A very simple calculation form, displaying the results in an output element
<form oninput="sum.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" id="a" type="number"> +
<input name="b" id="b" type="number"> =
<output name="sum" for="a b"></output>
This is a phrasing element that requires an end tag and can only contain text and other phrasing elements.
The entire contents of the output element are the element's value, so any initial value—including any
nested elements—is replaced when the value changes. An empty output element has no value. This is
also a form-associated element, but doesn't necessarily have to appear within a form element—the
optional form attribute can associate an output element with one or more forms elsewhere in the same
document. It displays as an inline element but doesn't have any default styling otherwise.
Figure 8-28 shows our simple calculator in Chrome on OS X, but it's not much to look at. The output
element has no default styling at all so its value is ordinary text. You could make this form a lot fancier with
a little CSS wizardry. In previous versions of HTML you might have used a simple span to display such
results, but output is much more semantically meaningful.
Figure 8-28. The simple addition form as seen in Chrome for Mac OS X. The output element has no default styling so
its value is just ordinary text.
The output element doesn't require any attributes.
for : contains a space-separated list of IDs of form controls that contributed to the output
element's value. This attribute establishes an explicit relationship between one output element