Français

<output>

Display the result of a calculation in real time

— 1 min read

  • HTML
  • accessibility
  • semantics
  • interactions

<output> — The calculation result

The <output> element represents the result of a calculation or user action. The for attribute indicates which fields contribute to the result. It is an implicit live region.

When to use it

You want to display a cart total, the result of a converter, a quiz score, or any value calculated from other form fields.

What you gain

Accessibility: <output> is a live region. Screen readers automatically announce value changes. The for attribute links the result to its source fields.

Code example

<form oninput="total.value = parseInt(price.value) * parseInt(qty.value)">
  <label for="price">Unit price:</label>
  <input type="number" id="price" name="price" value="25">
 
  <label for="qty">Quantity:</label>
  <input type="number" id="qty" name="qty" value="2">
 
  <label for="total">Total:</label>
  <output id="total" name="total" for="price qty">50</output>
</form>

Further reading