<output> Output
Displays the result of a calculation or a user action.
<output> displays a result, usually one a script calculates from other controls. List the ids of the controls it depends on in its for attribute.
It acts as a live region, so screen readers can announce changes. With no JavaScript it shows only the text between its tags, which is what this course's preview displays.
The output element definition (opens in a new tab) describes the for attribute that names the inputs behind the calculation. Those are usually input elements.
Syntax
<output name="result" for="a b">0</output>When to use it
When the page calculates a value from what the user typed, put it in <output>. Loan repayments, cart subtotals, password strength and the current number on a range slider are good examples. Browsers and assistive technology then know the text is a result and treat it differently from ordinary content.
A fixed message that ignores the inputs can be a plain paragraph. Status lines like "Saved" or "3 results found", which belong to no particular field, usually go in a role="status" region. And if people need to copy or tweak the result, try a read-only input. It gets sent with the form. An output does not.
Reset buttons can catch you out. The default value of an output is the text written in the HTML, and a form reset puts that text back. Suppose the source says 0 and the inputs start at values that add up to 5: after a reset the result is wrong until a script runs again. Write starting text that matches the starting inputs, like the examples below do.
Attributes
| Attribute | What it does |
|---|---|
for | Ids of the controls used in the calculation. |
name | Name of the element. |
form | Id of the form it belongs to. |
Live example
Edit the code and watch the preview.
<form>
<input type="number" id="a" name="a" value="2"> +
<input type="number" id="b" name="b" value="3"> =
<output name="sum" for="a b">5</output>
</form>More examples
Slider with its current value
Beside the range slider, an output linked with for shows the value. On a real site a few lines of script would update the number as the slider moves. Here the starting text simply matches the slider's starting value.
<form>
<label for="bright">Brightness</label>
<input type="range" id="bright" name="bright" min="0" max="100" value="40">
<output for="bright" name="shown">40</output>%
</form>Split the bill
Enter a total and a head count, and the output shows what each person owes. Its for attribute lists both inputs the result depends on. With no script attached, the result keeps its starting value, and that value fits the starting inputs: $60 split four ways.
<form>
<label for="total">Bill total ($)</label>
<input type="number" id="total" name="total" min="0" step="0.01" value="60">
<label for="people">People</label>
<input type="number" id="people" name="people" min="1" value="4">
<p>Each person pays $<output for="total people" name="share">15.00</output></p>
</form>Tip: Put the source controls' ids in for.
Browser support
All current browsers support output, and the HTML Living Standard defines it. Internet Explorer and other very old browsers never did. Whether a change gets announced like a live region depends on the browser and screen reader pair. Check output element support (opens in a new tab), and if the announcements matter to your users, test them.
Accessibility
Many browsers expose output as a live region and screen readers announce its changes. Keep the updates short and infrequent. When an update deserves an announcement is explained in the W3C note Understanding Status Messages (opens in a new tab).
Common mistakes
Wrong
<span id="total">0</span>Right
<output id="total" for="qty price">0</output>With output, the text is marked as a computed result tied to its inputs.
Frequently asked questions
What is the output tag used for?
For a result: the total in a price calculator, say, or the current value of a range slider. <output> lists the ids of the inputs that fed into the result in its for attribute. It can also have a name and be associated with a form. You update its content from JavaScript.
Is the output value submitted with the form?
No. An <output> can have a name and belong to a form, yet its value is left out of the submission. If the server needs the result, recalculate it there or copy it into a hidden input. Recalculating on the server is the safer choice anyway.