<output>

Syntax

<output name="result" for="a b">0</output>

Examples

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

<input type="range" id="volume" min="0" max="100" value="50" oninput="vol.value = volume.value">
<output id="vol" for="volume">50</output>

<output style="display: inline-block; background: #dbeafe; color: #1e40af; padding: 4px 12px; border-radius: 999px; font-weight: 600;">$42.50</output>

Attributes

• for (string): A space-separated list of IDs of elements that contributed to the calculation
• name (string): Names the output for form submission

Best practices

• Use output for genuinely calculated or derived values, not as a generic text container
• Set the for attribute to link the output back to the inputs it depends on, improving accessibility
• Combine with the oninput event on the parent form for live updates without a submit step
• Provide an initial value inside the tags so the output is not empty before any calculation runs

Browser compatibility

Related HTML documentation

Specifications & further reading

• HTML Living Standard