The Output Element

Display live form calculation results with the semantic <output> element.

Overview

The <output> element represents the result of a calculation or user action. It is the semantic HTML way to display computed values in a form like the sum of two numbers, the selected value from a range slider, or a running total in a cart. The for attribute on <output> accepts a space-separated list of input ids, establishing a programmatic relationship between the inputs that produce the result and the output that displays it. This relationship is read by screen readers. <output> differs from a read-only <input> in that it is semantically a result, not an input screen readers announce it as such.

Key Points

•<output for="id1 id2"> links the output to its source inputs semantically
•The name attribute allows the output value to be submitted with the form
•Use JavaScript's oninput or addEventListener to update the output value dynamically
•<output> is an inline element; it renders no special styling by default
•Screen readers identify <output> as a result, not an editable field
•Default value (before any calculation) can be set as inner content

Examples

Range slider with live output display

<form>
  <label for="volume">Volume: </label>
  <input
    type="range"
    id="volume"
    name="volume"
    min="0"
    max="100"
    value="50"
    oninput="volOut.value = this.value"
  >
  <output id="volOut" name="volume_display" for="volume">50</output>
</form>

oninput updates the output immediately as the slider moves.

Addition calculator

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <label for="a">First number:</label>
  <input type="number" id="a" name="a" value="0">

  <label for="b">Second number:</label>
  <input type="number" id="b" name="b" value="0">

  <label>Sum: <output id="result" name="result" for="a b">0</output></label>
</form>

The oninput event on the form fires when any input inside it changes.

Tip calculator with output

<form id="tip-calc">
  <label for="bill">Bill amount ($):</label>
  <input type="number" id="bill" min="0" step="0.01" value="50">

  <label for="tip-pct">Tip %:</label>
  <input type="range" id="tip-pct" min="0" max="30" value="15">
  <output for="tip-pct" id="pct-display">15%</output>

  <p>Tip: <output id="tip-amount" for="bill tip-pct">$7.50</output></p>
  <p>Total: <output id="total" for="bill tip-pct">$57.50</output></p>
</form>

<script>
  const form = document.getElementById('tip-calc');
  form.addEventListener('input', () => {
    const bill = parseFloat(form.bill.value) || 0;
    const pct  = parseInt(form['tip-pct'].value);
    form['pct-display'].value  = pct + '%';
    form['tip-amount'].value   = '$' + (bill * pct / 100).toFixed(2);
    form.total.value           = '$' + (bill * (1 + pct / 100)).toFixed(2);
  });
</script>

Common Mistakes

Using a read-only <input> for calculated results <output> is the semantic choice
Forgetting the for attribute it links the result to its source inputs for screen readers
Not setting an initial value <output> will appear empty until an interaction occurs

Note

Use <output> anytime you display a value derived from other form fields: calculators, cart totals, length counters, BMI results. It's more accessible than a plain <span> or disabled <input>.

The Output Element

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does the for attribute on <output> do?