<output>: The Output element
The <output> HTML element 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 |
|---|
| HTML Standard (HTML) # the-output-element |
Browser compatibility
BCD tables only load in the browser
