The <output> element displays the result of a calculation — typically one performed live in JavaScript based on other form fields' values.
Syntax
<output name="result" for="input1 input2">0</output>Basic Example
<form oninput="total.value = parseInt(qty.value || 0) * 999">
<label for="qty">Quantity</label>
<input type="number" id="qty" name="qty" value="1" min="1">
Total: ₹<output name="total" for="qty">999</output>
</form>Browser output: a live-updating number — as the visitor changes the quantity field, the total shown in the <output> updates instantly, without a page reload.
How It Works
<output> itself does no calculation — it's purely a semantic container for displaying a result that JavaScript computes and writes into it. The minimal JavaScript above exists only to illustrate the pattern this element is designed for.
Important Attributes
| Attribute | Purpose |
|---|---|
for | Lists the ids of the input(s) this result depends on, space-separated |
name | Lets JavaScript reference this element by name, and makes its value part of form submission |
Real-World Example
<label for="marks1">Math Score</label>
<input type="number" id="marks1" name="marks1">
<label for="marks2">Science Score</label>
<input type="number" id="marks2" name="marks2">
Average: <output for="marks1 marks2">--</output>A result that genuinely depends on two separate input fields — exactly what the space-separated for attribute is designed to express.
Common Mistakes
- Using a plain
<span>or<div>for a calculated result instead of the semantically correct<output>element - Expecting
<output>to perform any calculation on its own — it never does; it only displays whatever value JavaScript assigns to it
Best Practices
- Use
<output>specifically for calculated or derived results tied to other form fields - Set the
forattribute to accurately reflect which input(s) the result actually depends on
Accessibility Considerations
<output> has an implicit "status" role, meaning screen readers can announce updates to it automatically as the value changes — a real benefit over a generic <div>, which requires extra ARIA attributes to achieve the same live-update announcement.
SEO Considerations
No direct ranking effect.
Browser & Modern HTML Notes
Requires JavaScript to actually be useful — the element itself is just a semantic, accessible container; all real behavior comes from script you write.
Mini Practice
- Build a simple quantity × price calculator using
<output>, similar to the example above. - Explain why
<output>is a better choice than a plain<span>for a live calculation result.
