<output>
The <output> element represents the result of a calculation or user action. It can connect form controls and derived values semantically.
Overview
The <output> element represents the result of a calculation or user action. It can connect form controls and derived values semantically.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 10 | ≤18 | 4 | 7 | 18 | 7 | |
| HTML attribute | ||||||
| The for attribute is an allowed attribute for label and output. When used on a element it indicates the form element that this label describes. When used on an element it allows for an explicit relationship between the elements that represent values which are used in the output. | 10 | ≤18 | 4 | 7 | 18 | 7 |
| The form HTML attribute associates a form-associated element with a form element within the same document. This attribute applies to the button, fieldset, input, object, output, select, and textarea elements. | 10 | ≤18 | 4 | 7 | 18 | 7 |
name | 10 | ≤18 | 4 | 7 | 18 | 7 |
| DOM API | ||||||
| The HTMLOutputElement interface provides properties and methods (beyond those inherited from HTMLElement) for manipulating the layout and presentation of output elements. | 9 | 14 | 4 | 5.1 | 18 | 5 |
| The defaultValue property of the HTMLOutputElement interface represents the default text content of this output element. Getting and setting this value is equivalent to getting and setting Node.textContent on the output. | 9 | 14 | 4 | 5.1 | 18 | 5 |
| The form read-only property of the HTMLOutputElement interface returns an HTMLFormElement object that owns this output, or null if this output is not owned by any form. | 9 | 14 | 4 | 5.1 | 18 | 5 |
| The read-only htmlFor property of the HTMLOutputElement returns a live DOMTokenList object containing a list of ids of those elements contributing input values to (or otherwise affected) the calculation. It reflects the output element's for content attribute. | 9 | 14 | 4 | 5.1 | 18 | 5 |
HTMLOutputElement Experimental The HTMLOutputElement() constructor creates a new HTMLOutputElement object. | | | | 15 | | 15 |
| The HTMLOutputElement.labels read-only property returns a NodeList of the label elements associated with the output element. | 9 | 18 | 56 | 5.1 | 18 | 5 |
| The name property of the HTMLOutputElement interface indicates the name of the output element. It reflects the element's name attribute. | 9 | 14 | 4 | 5.1 | 18 | 5 |
| The type read-only property of the HTMLOutputElement interface returns the string "output". | 9 | 14 | 4 | 5.1 | 18 | 5 |
| The value property of the HTMLOutputElement interface represents the value of the output element as a string, or the empty string if no value is set. It returns or sets the contents of the element, similar to the Node.textContent property. | 9 | 14 | 4 | 5.1 | 18 | 5 |
- Before Chrome 50, this property returned the deprecated child `DOMSettableTokenList` instead of `DOMTokenList`.
- Before Chrome Android 50, this property returned the deprecated child `DOMSettableTokenList` instead of `DOMTokenList`.
Syntax
<form oninput="result.value = Number(a.value) + Number(b.value)">
<input type="number" id="a" value="0"> +
<input type="number" id="b" value="0"> =
<output name="result" for="a b">0</output>
</form>Live demo
Calculationresult. Display
Output element in forminside. Calculationresult display.for attribute in inputsource reference.
Use cases
Live calculations
Show totals, estimates, or computed values that update as the user edits a form.
Derived summaries
Expose a generated result such as selected count or pricing summary in a semantic output container.
Cautions
- output is most helpful when it truly reflects a result, not as a generic wrapper for any dynamic text.
- If the result is important, make sure the update logic stays synchronized with the input controls reliably.
Accessibility
- Important changing outputs may need additional announcement patterns so users notice the update at the right time.
Related links
Powered by web-features