<output> Tag in HTML – Show Calculation Results

Quick facts

Category	Flow content, phrasing content, form-associated (listed, labelable, resettable), palpable content
Content model	Phrasing content
Tag omission	Neither the start nor the end tag can be omitted
Permitted parents	Any element that accepts phrasing content (usually inside a <form>)
DOM interface	`HTMLOutputElement`

Syntax

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

Attribute	Description
for	Space-separated ids of the controls that the result is calculated from
name	A name for the element, so scripts can refer to it (e.g. `form.total`)
form	The `id` of a <form> to belong to, if it sits outside it

Common examples

A live calculator

The form’s oninput updates the result whenever a number changes.

<form oninput="total.value = Number(a.value) + Number(b.value)">
  <input type="number" id="a" value="2"> +
  <input type="number" id="b" value="3"> =
  <output name="total" for="a b">5</output>
</form>

Showing a slider value

A range input has no visible number; output shows it.

<label for="vol">Volume</label>
<input type="range" id="vol" min="0" max="100" value="40"
  oninput="volOut.value = this.value + '%'">
<output id="volOut" for="vol">40%</output>

A loan payment estimate

Output is good for any result calculated from what the visitor enters.

<form id="loan">
  <label>Amount <input name="amt" type="number" value="10000"></label>
  <label>Months <input name="m" type="number" value="24"></label>
  <p>Monthly: <output name="pay">416.67</output></p>
</form>

<script>
  loan.addEventListener("input", () => {
    loan.pay.value = (loan.amt.value / loan.m.value).toFixed(2);
  });
</script>

<output> vs a <span> result

You could show a calculated result in a <span>, but nothing would tell assistive technology that it’s the result of the form. <output> is a live region by default in most browsers, so screen readers announce the new value when it changes, and its for attribute links it to the inputs it depends on.

It also belongs to the form, so form.elements.total finds it, and form reset restores its original text. Use output for results; use span for text that isn’t calculated from user input.

	<output>	<span>
Announced when it changes	Yes (in most browsers)	No
Linked to inputs	for attribute	No
Part of the form	Yes	No

Common mistakes to avoid

Expecting it to be submitted. Output values aren’t sent with the form; copy them into a hidden input if needed.
Leaving it empty at the start. Show an initial result so the page makes sense before anyone types.
Using it for static text. If the text never changes, it isn’t an output.
Forgetting Number(). Input values are text, so "2" + "3" gives "23" instead of 5.

Accessibility & SEO tips

Give the output a label or surrounding text (“Total:”) so its meaning is clear when announced.
Avoid updating the output on every keystroke with long text — screen readers may read it over and over. Short values work best.
Calculators and converters that give instant results are great “tool” content that people link to and bookmark.
Round long decimal results with toFixed() or Intl.NumberFormat so the result is easy to read and announce.

Browser support

Supported in all modern browsers, including Chrome, Edge, Firefox, Safari and their mobile versions. It was introduced with HTML5, and only very old browsers such as Internet Explorer 8 needed workarounds.

Related tags

Frequently asked questions

Is the value of <output> sent when the form is submitted?

No. Although it has a name, an <output> value is not included in the submitted form data. If the server needs the result, calculate it there or copy it into a hidden input.

Do screen readers announce changes to <output>?

Yes. <output> has the status role, so most screen readers read the new value politely, after they finish what they are saying.

Do I need JavaScript to use <output>?

Yes, to calculate the result. The element only displays it; a short script, often in the form's oninput attribute, updates its value.

What does the for attribute on <output> do?

It lists the ids of the inputs the result is calculated from, separated by spaces, which tells assistive technology how they are related.

How do I set the value of <output> with JavaScript?

Set its value property, for example document.getElementById("total").value = 42;. It works like setting textContent.

Does form reset clear <output>?

Reset puts it back to its default value, which is the text originally written between the tags.

Can <output> be outside a form?

Yes. Use its form attribute with the form's id to connect it, or use it on its own as a live result area updated by your script.

How do I format a currency result in <output>?

Use new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(value) and set the output's value to the formatted text.