A quote form shows a price that updates as soon as the user changes the quantity or the chosen option. That number is neither an input field nor plain text: it is the result of a calculation based on other fields in the form, and it changes with every interaction. Many sites display it inside a plain <span> updated with JavaScript, which works visually but never links the result to the fields it depends on.
The <output> tag exists to represent exactly that case: the result of a calculation, inside or near a form.
Definition
<output> represents the result of a calculation or of a user action, usually derived from the value of one or more fields. Unlike an input field, its content is never edited directly by the user: it is always written by script, in response to a change happening elsewhere in the form.
Its role is purely semantic. Nothing calculates itself inside an <output> on its own: the tag simply announces, to the browser and to assistive technology, that a given piece of content is the result of a calculation, and which fields that calculation depends on.
Syntax and the for attribute
The for attribute takes a space separated list of the ids of the fields used in the calculation. For <output>, it plays a role close to a <label> tied to a field: it states an explicit relationship, usable by assistive technology, rather than a mere visual proximity.
| Attribute | Role |
|---|---|
for | The space separated ids of the fields used in the calculation |
name | The name under which the value is submitted with the form |
form | The id of the associated form, useful when the tag lives outside it |
Concrete example
Here is a minimal price calculator: the total recalculates on every change to the quantity, and the for attribute explicitly states that this total depends on the quantity field.
<form oninput="total.value = quantity.value * 12">
<label for="quantity">Quantity</label>
<input type="number" id="quantity" name="quantity" value="1" min="1">
Total: <output for="quantity" name="total" id="total">12</output> €
</form>On every keystroke in the quantity field, the oninput event recalculates and rewrites the content of <output>. No library is needed for a case this simple, though most real calculators hand the calculation off to a dedicated JavaScript function rather than an inline attribute.
Difference with <meter> and a plain span
<meter> displays a measurement inside a scale bounded by a minimum and a maximum, with quality thresholds. <output> has none of that: it carries no scale at all, only an explicit link to the fields its value depends on. A total price, a conversion result or a sum have no bounded range to display, which rules out <meter> and naturally points to <output>.
Against a <span> updated with JavaScript, the difference is more subtle but real: <output> carries an implicit live region role in some browsers, and above all the for attribute documents the dependency right in the markup, readable without running the script.
The for attribute is often skipped because it has no visual effect and the calculation works perfectly well without it. Yet it is exactly what makes the relationship useful to a screen reader or a code analysis tool: without it, <output> adds little over a plain span.
Best practices
Always pair the for attribute with its source fields, even when only one field is involved. Give the tag a name when its value needs to be submitted with the rest of the form, which is rarely the case for a purely informational total but useful for a result the server needs to receive. Finally, keep the actual calculation in separate JavaScript rather than an inline attribute as soon as the logic goes beyond a simple multiplication.
Frequently asked questions
output submitted with the form?Yes, provided it has a name attribute, exactly like a regular input field. Without name, its value stays purely visual and is never sent to the server when the form is submitted.
output be styled like a text field?Yes, <output> carries no imposed appearance by default beyond a plain inline display. Many projects deliberately style it to look like a disabled field, to visually signal that it is a result rather than something the user can type into.
output have to sit inside a form?No, the form attribute exists precisely to link the tag to a form located elsewhere on the page. In practice, placing it directly inside the relevant form stays easier to maintain and avoids having to manage that extra attribute.