HTML <output> Tag

The <output> tag is one of the HTML5 elements. It defines a place for displaying the result of a calculation performed by a script, or the outcome of a user's interaction with a form. It is typically paired with <input> controls inside a <form>, and is well suited to live results like a running total, a price after discount, or an exchange-rate conversion.

Why use `<output>` instead of a `<span>`?

You could show a calculated value in a plain <span>, but <output> adds semantics and accessibility that a <span> does not:

It is an implicit live region. <output> has the ARIA status role by default, which makes it a polite live region. When its text content changes, assistive technologies such as screen readers announce the new value automatically — without you adding any role or aria-live attributes.
It is semantically tied to the form. Browsers and tools treat <output> as a real form-associated element, so the value's relationship to its inputs is part of the document's meaning, not just its layout.
The for attribute documents the relationship. It lists the IDs of the controls that contributed to the result, expressing intent in markup.

Because of the live-region behavior, a sighted user sees the number update while a screen-reader user hears it update. A <span> gives you only the visual change.

The `for` attribute and `oninput` wiring

The for attribute takes a space-separated list of element IDs — the controls whose values feed into the calculation. It is purely declarative: it tells readers and tooling which inputs the result depends on. It does not by itself recalculate anything.

The recalculation is driven by JavaScript. Putting oninput on the <form> is a common shortcut: the input event bubbles, so a single handler on the form fires whenever any control inside it changes. Inside that handler you read the input values and assign the result to output.value.

Basic example

In the example below, an oninput handler on the form keeps the <output> in sync as either control changes. The for="a b" attribute records that the result depends on the inputs with IDs a and b.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form oninput="x.value = parseInt(a.value) + parseInt(b.value)">
      <input type="range" id="a" value="50" /> +
      <input type="number" id="b" value="25" /> =
      <output name="x" for="a b">75</output>
    </form>
  </body>
</html>

Try it Yourself »

The 75 written between the tags is the element's default value — the value shown before any input changes, and the value <output> is restored to when the form is reset.

Wiring it with `addEventListener`

Inline oninput is concise but mixes behavior into markup. In real projects, keep the script separate and attach the handler with addEventListener. This version multiplies two numbers and reuses one handler for the form's input event:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form id="calc">
      <input type="number" id="e" value="6" /> &times;
      <input type="number" id="f" value="7" /> =
      <output id="result" for="e f">42</output>
    </form>

    <script>
      const form = document.getElementById("calc");
      const result = document.getElementById("result");

      form.addEventListener("input", () => {
        const e = document.getElementById("e").valueAsNumber;
        const f = document.getElementById("f").valueAsNumber;
        result.value = e * f;
      });
    </script>
  </body>
</html>

Try it Yourself »

Note valueAsNumber: for number and range inputs it returns a real number (or NaN for empty/invalid input), so you avoid the parseInt conversion. If the user clears a field, the result becomes NaN; guard against that in production code if a blank should show 0 or an empty string.

The `form` attribute (disassociated outputs)

By default an <output> belongs to the form it is nested inside. The form attribute lets you associate an output with a form even when it lives outside that form's markup — useful when layout forces the result to sit elsewhere on the page. Point form at the id of the target form:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form id="sum-form" oninput="total.value = Number(a.value) + Number(b.value)">
      <input type="number" id="a" value="10" /> +
      <input type="number" id="b" value="5" />
    </form>

    <p>
      The total is:
      <!-- This output lives outside the form but belongs to it -->
      <output name="total" form="sum-form" for="a b">15</output>
    </p>
  </body>
</html>

Is the value submitted with the form?

No. Even though <output> accepts a name attribute, its value is not sent when the form is submitted. The name exists so scripts can reference the element and for form-related APIs, not for transmitting data to the server. If you need the computed result on the server, copy it into a hidden input (<input type="hidden">) or recompute it server-side.

When the form is reset, the <output> returns to its default value — the text content present in the HTML — rather than to whatever value a script last assigned.

Attributes

Attribute	Value	Description
for	element_id	Defines one or more space-separated element IDs, specifying the connection between the calculation result and the elements used in the calculation.
form	form_id	Defines one or more forms, which the output element belongs to.
name	name	Defines the name of the element.

The <output> tag supports the Global Attributes and the Event Attributes.

HTML <input> Tag — the controls that feed values into an <output>.
HTML <form> Tag — the container an <output> is associated with.

Practice

What is the primary purpose of the HTML output element?

It validates form fields before submission.It displays the result of a calculation, and acts as a live region so screen readers announce updates.It only works in the Firefox browser.Its value is automatically submitted to the server with the form.It embeds one website inside another website.

Why use <output> instead of a <span>?

The for attribute and oninput wiring