Path // www.yourhtmlsource.com → Reference → <output>

<output>

by Ross Shannon

The <output> element represents the result of a calculation or user action. It is typically used to display dynamic results that change based on user input, such as the sum of numbers, the result of a formula, or feedback from form interactions. The element is designed to be updated via JavaScript and provides semantic meaning to calculated results.

Clock This page was last updated on 2025-11-17


Syntax

<output name="result" for="input1 input2">0</output>

The element requires both opening and closing tags. The content between the tags is the initial or current result value. The for attribute lists the IDs of elements that contribute to the calculation.

Attributes

  • for - Space-separated list of IDs of elements that contribute to (or affect) the output value. This creates a semantic relationship for accessibility.
  • name - Name of the output for form submission (the value can be submitted with the form)
  • form - Associates the output with a form by its id (for outputs outside the form)
  • Global attributes - Supports standard attributes like id, class, style
  • aria-live - Often set to "polite" so screen readers announce changes

Examples

Simple Calculator

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <label for="a">Number 1:</label>
  <input type="number" id="a" name="a" value="0">
  
  <label for="b">Number 2:</label>
  <input type="number" id="b" name="b" value="0">
  
  <p>Sum: <output name="result" for="a b">0</output></p>
</form>

Range Slider with Live Value

<form oninput="volume_output.value = volume.value">
  <label for="volume">Volume:</label>
  <input type="range" id="volume" name="volume"
         min="0" max="100" value="50">
  <output name="volume_output" for="volume"
          aria-live="polite">50</output>
</form>

Shopping Cart Total

<form id="cart">
  <label for="qty">Quantity:</label>
  <input type="number" id="qty" name="qty" value="1" min="1">
  
  <p>Price per item: $10.00</p>
  <p>Total: $<output name="total" for="qty" aria-live="polite">10.00</output></p>
</form>

When to Use

Use the <output> element when:

  • Displaying the result of a calculation
  • Showing real-time values from range sliders
  • Presenting computed totals or summaries
  • Providing feedback based on user input
  • Creating interactive calculators or converters

Accessibility and best practices:

  • Use the for attribute to indicate which inputs affect the output
  • Add aria-live="polite" so screen readers announce changes
  • Provide an initial value between the tags
  • Update the output programmatically with JavaScript
  • Use clear labels or context to explain what the output represents
  • Consider formatting output values appropriately (currency, percentages, etc.)
  • The output element is read-only - users cannot edit it directly
  • Can be styled like any other inline element
  • Works without JavaScript (shows initial value) but typically requires it
  • <form> - Parent form container
  • <input> - Inputs that contribute to the output
  • <meter> - Displays a scalar measurement within a range
  • <progress> - Shows progress toward completion
  • <label> - Can label the output element

JavaScript example:

// Update output when input changes
const input = document.getElementById('qty');
const output = document.querySelector('output[name="total"]');

input.addEventListener('input', function() {
  output.value = (this.value * 10).toFixed(2);
});