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.
This element includes the global attributes.
-
for
-
A space-separated list of other elements' id
s, 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 the id
of 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.elements
API.
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 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>
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.