<output>

<output> displays the result of a calculation or an action. Its for attribute lists the IDs of contributing controls, separated by spaces. It does not calculate the result by itself.

A working calculation

<form>
  <label for="quantity">Quantity</label
  ><input id="quantity" type="number" min="0" value="2" /><label for="price"
    >Price per item</label
  ><input id="price" type="number" min="0" step="0.01" value="3" />
  <p>
    <label for="total">Total</label
    ><output id="total" for="quantity price">6.00</output>
  </p>
</form>
<script>
  const form = document.querySelector("form");
  form.addEventListener("input", () => {
    const quantity = document.querySelector("#quantity").valueAsNumber;
    const price = document.querySelector("#price").valueAsNumber;
    document.querySelector("output").value = Number.isFinite(quantity * price) ? (quantity * price).toFixed(2) : "Enter both values";
  });
</script>

/* Optional presentation */
label {
  display: block;
  margin: 0.75rem 0 0.25rem;
}
input,
select,
textarea,
button {
  font: inherit;
  max-width: 100%;
}

Change either input. JavaScript updates the output’s value; empty numeric fields get a useful instruction instead of NaN.

Form association and accessibility

form can associate output with a form elsewhere in the same document. name allows access through the form’s elements API. The output’s value and name are not submitted as form data. Many browsers expose it as a live status, so the changed result can be announced without moving focus. Test announcements with the assistive technology you support.

Common mistakes

for records a relationship; it does not run a formula. The name attribute does not establish that relationship. Label the result and keep its meaning visible. For important calculations, validate the input and calculation in the application’s trusted processing path rather than relying on this demonstration.

Continue to input for number constraints and form for submission rules.

Sources and browser support

MDN: output describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.