<output>
The result of a calculation or a user action, for example a total in a calculator.
- Display
- inline
- Closing tag
- Required
- Permitted content
- Phrasing content
Example
#<form oninput="total.value = Number(minutes.value) * Number(days.value)">
<p><label>Minutes per day <input type="number" id="minutes" value="30" min="0" max="240"></label></p>
<p><label>Days per week <input type="number" id="days" value="5" min="1" max="7"></label></p>
<p>Total per week: <output name="total" for="minutes days">150</output> min</p>
</form>Definition and usage
#The <output> element displays a result: an order total, a value set with a slider, a calculatorâs result. You usually change its content in JavaScript through the value property, and the for attribute indicates which fields the result came from.
Browsers treat <output> as a status region, so screen readers can announce the new value without moving focus. That makes it a better choice than a plain <span> for a result that changes while data is being entered.
Although <output> is a form element, its content isnât sent to the server. If the server needs the result, it should compute it itself.
Syntax
#<output name="result" for="field1 field2">0</output>Attributes
#list of ids
The ids of the fields the value is derived from, separated by spaces. It describes this dependency for assistive technology, but doesnât compute anything by itself.name
text
The elementâs name, letting you refer to it in a script, for exampleform.elements.total. Despite the name, the value isnât sent with the form.
The element also supports all global attributes, such as class, id, style and hidden.
Attributes in practice
#for
list of idsThe ids of the fields the value is derived from, separated by spaces. It describes this dependency for assistive technology, but doesnât compute anything by itself.
<form oninput="level.value = volume.value + '%'">
<label for="volume">Narrator volume</label>
<input type="range" id="volume" min="0" max="100" value="60">
<output name="level" for="volume">60%</output>
</form>Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Set the result through
output.value, not throughinnerHTML. Itâs simpler and safe, because the value always ends up in the element as plain text. - The text written between the tags is the default value
<output>reverts to when the form is reset.
Related entries
#- <form>A form that collects data from the user and sends it to a given address.
- <input>A form field: text, email, password, number, date, slider, checkbox, file and many more.
- <label>A form fieldâs label. Clicking the label moves the cursor to the field.
- <meter>A gauge for a value within a known range: disk space used, a test score, battery level.
- <progress>A progress bar for a task: uploading a file, an installation, or course completion.
Spotted a mistake or missing an example? Write to us.