<output>: The Output element

This element includes the global attributes.

for

A space-separated list of other elements' ids, indicating that those elements contributed input values to (or otherwise affected) the calculation.

form

The <form> element to associate the output with (its form owner). The value of this attribute must be the id of a <form> in the same document. (If this attribute is not set, the <output> is associated with its ancestor <form> element, if any.)

This attribute lets you associate <output> elements to <form>s anywhere in the document, not just inside a <form>. It can also override an ancestor <form> element. The <output> element's name and content are not submitted when the form is submitted.

name

The element's name. Used in the form.elements API.

The <output> value, name, and contents are NOT submitted during form submission.

Many browsers implement this element as an aria-live region. Assistive technology will thereby announce the results of UI interactions posted inside it without requiring that focus is switched away from the controls that produce those results.

In the following example, the form provides a slider whose value can range between 0 and 100, and an <input> element into which you can enter a second number. The two numbers are added together, and the result is displayed in the <output> element each time the value of any of the controls changes.

<form id="example-form">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>

const form = document.getElementById("example-form");
const a = form.elements["a"];
const b = form.elements["b"];
const result = form.elements["result"];

function updateResult() {
  const aValue = parseInt(a.value);
  const bValue = parseInt(b.value);
  result.value = aValue + bValue;
}

form.addEventListener("input", updateResult);

updateResult();