How to Use the output Element

The HTML output element displays the result of a calculation or user action. It is not the input itself; it gives the result a clear place and meaning in the page.

The short answer

Minimal example

<label for="price">Price</label>
<input id="price" type="number" value="10">

<label for="quantity">Quantity</label>
<input id="quantity" type="number" value="2">

<label for="total">Total</label>
<output id="total" for="price quantity">20</output>

Here, price and quantity are used by the calculation and total displays the result. The for attribute does not run the calculation. JavaScript or another application mechanism must update the result.

When the inputs change, JavaScript updates output.value. Resetting the form returns the result to its initial value. Select “Inspect submitted fields” to see that an output with name="total" is still absent from FormData.

Describe the relationship with for

Use for to list the id values of controls that contributed to the result. Separate multiple values with spaces.

<input id="width" type="number" value="5">
<input id="height" type="number" value="4">
<output id="area" for="width height">20</output>

This records the relationship in the HTML. It does not watch the inputs or calculate a value. Your application still needs to update the result when an input changes.

Displayed values and submitted values are different

An output can be associated with a form, but it is not the same as a form control that provides a submitted value. A name on output does not make its value part of normal form submission.

<form>
  <input id="amount" name="amount" type="number" value="1000">
  <output id="tax" name="tax" for="amount">100</output>
  <input type="hidden" name="tax-to-send" value="100">
  <button type="submit">Submit</button>
</form>

Use a submittable input or another appropriate control for data that the server must receive. Keep the visible result and the submitted value synchronized, and validate the value on the server as well.

Make the result clear and understandable

• Give the result a useful label or nearby explanation.
• Show units and the meaning of the calculation instead of displaying only a changing number.
• Check how dynamic updates are communicated in the browsers and assistive technologies you support.
• Do not rely on output alone when the result must be submitted.

Common mistakes

• Expecting for to calculate or update the result automatically.
• Expecting an output value to be included in form submission.
• Showing a number without explaining what it represents.
• Providing no useful initial text when JavaScript is unavailable or fails.

Continue in Atlas

For categories, for and form ownership, value, defaultValue, reset behavior, the submission boundary, DOM APIs, and accessibility, see the output element in Yugien Atlas. Also see the input element for input controls and the label element for labeling.