The output Element

Live Demo

Firefox 4+	Safari 5.1+	Safari 5+	Chrome 10+	Opera 11+	IE 10+	Android 2.3+

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