The HTML Output element (<output>) is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.
| Content categories | Flow content, phrasing content, listed, labelable, resettable form-associated element, palpable content. |
|---|---|
| Permitted content | Phrasing content. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts phrasing content. |
| Implicit ARIA role | status |
| Permitted ARIA roles | Any |
| DOM interface | HTMLOutputElement |
Attributes
This element includes the global attributes.
for- A space-separated list of other elementsβ
ids, indicating that those elements contributed input values to (or otherwise affected) the calculation. form- The
<form>element to associate the output with (its form owner). The value of this attribute must be theidof a<form>in the same document. (If this attribute is not set, the<output>is associated with its ancestor<form>element, if any.) - This attribute lets you associate
<output>elements to<form>s anywhere in the document, not just inside a<form>. It can also override an ancestor<form>element. name- The element's name. Used in the
form.elementsAPI.
The <output> value, name, and contents are NOT submitted during form submission.
Examples
In the following example, the form provides a slider whose value can range between 0 and 100, and an <input> element into which you can enter a second number. The two numbers are added together, and the result is displayed in the <output> element each time the value of any of the controls changes.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" id="b" name="b" value="50" /> + <input type="number" id="a" name="a" value="10" /> = <output name="result" for="a b">60</output> </form>
Accessibility Concerns
Many browsers implement this element as an aria-live region. Assistive technology will thereby announce the results of UI interactions posted inside it without requiring that focus is switched away from the controls that produce those results.
Specifications
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard The definition of '<output>' in that specification. |
Living Standard | |
| HTML5 The definition of '<output>' in that specification. |
Recommendation |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
output | Chrome Full support 10 | Edge Full support β€18 | Firefox Full support 4 | IE No support No | Opera Full support 11 | Safari Full support 7 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android ? | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
for | Chrome Full support 10 | Edge Full support β€18 | Firefox Full support 4 | IE No support No | Opera Full support 11 | Safari Full support 7 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android ? | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
