The output Element

The Current State of HTML5 Forms

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

Live Demo

X = 0

 


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 forform 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

Our Cookie Policy and Privacy Policy outline how we use cookies to help personalize content, tailor and measure our marketing, and improve your user experience. I agree to use of cookies for these purposes.