HTML <output> Element
The HTML <output> element represents the result of a calculation or another action performed by the user or a script.
Syntax
<output name="result" for="value1 value2">Result</output>The <output> element requires both an opening and closing tag. Its content represents the result produced by a calculation or user action.
Attributes
The <output> element supports the global HTML attributes and the following element-specific attributes:
| Attribute | Description |
|---|---|
for |
Lists the IDs of elements that contributed to or affected the calculated result. |
form |
Associates the <output> element with a <form> element. |
name |
Assigns a name to the output element for use with form-related scripting and identification. |
Example
This example uses two number fields and an <output> element to display their total as the values are changed.
Usage Notes
Use the <output> element when a webpage needs to display the result of a calculation or another action, such as a total, converted value, estimate, or dynamically generated result.
The for attribute can contain one or more space-separated element IDs that identify the controls or other elements involved in producing the result.
The form attribute can associate an <output> element with a form even when the output is not placed inside that <form> element.
The <output> element does not perform calculations by itself. A script or another mechanism is needed to calculate the value and update the displayed result.
Accessibility
Provide enough surrounding text or an associated <label> so users can understand what the displayed result represents.
The <output> element has semantics intended for displaying results, but dynamically changing results should still be tested with assistive technologies to make sure important updates are communicated appropriately.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <output> Element .
Related Elements
The <output> element is closely related to the <form> element that groups form controls, the <input> element used to collect values, and the <label> element used to identify form controls and results.