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 optimize service, personalize content, tailor and measure our marketing, and improve your user experience. I agree to use of cookies for these purposes.