The Current State of HTML5 Forms

The output Element

<output></output>
<output name="output" for="val1 val2" form="foo">0</output>

Live Demo

X = 0
Firefox
4+
Safari
5.1+
Safari Mobile
5+
Chrome
10+
Opera
11+
IE
10+
Android
2.3+
Supported Supported Supported Supported Supported Supported Supported

The Low Down

The <output> element is the semantically correct element for displaying the results of a calculation from form elements.

  • Attributes include for, form and name, in addition to the global attributes.
  • It does not have the value attribute. Rather, the textnode between the opening and closing tags make up the value. The default being the empty string.
  • It really doesn't need the value attribute, since the name/value pair are NOT submitted along with the form
  • For the most part, it's just a simple semantic element that any browser supports in display but not necessarily in function: similar to a <span> in appearance, but with added functionality.
  • The for attribute takes a space-separated (not comma-separated) list of ID's of elements that went into calculation.
  • The form attribute associates the <output> with a form, which is useful if it is not nested within it.
  • If the form is reset, the value will return to its default value.
  • Example usage: 1) subtotal, tax and total in a shopping cart, 2) output of a calculator, 3) current value of a range input.
  • Example code:
    <form oninput="output.value = (val1.valueAsNumber || 0) * (val2.valueAsNumber || 0)" id=foo>
    <input type=number name=val1> X <input type=number name=val2> =
    <output name=output for="val1 val2" form=foo>0</output>
    </form>
  • Article on HTML5 Doctor