<output>: The Output element
<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||
|Permitted ARIA roles||Any|
This element includes the global attributes.
- A space-separated list of other elements’
ids, indicating that those elements contributed input values to (or otherwise affected) the calculation.
<form>element to associate the output with (its form owner). The value of this attribute must be the
<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
<form>s anywhere in the document, not just inside a
<form>. It can also override an ancestor
- The element's name. Used in the
<output> value, name, and contents are NOT submitted during form submission.
In the following example, the form provides a slider whose value can range between
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>
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.
|HTML Standard (HTML)|
BCD tables only load in the browser