Foundation HTML5 with CSS3

Chapter 8

output

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

in the empty output element. A bit of basic JavaScript does the math (triggered by the oninput inline

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>

</form>

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.

Required Attributes

The output element doesn’t require any attributes.

Optional 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