← Back to All Tags

<output>

Represents the result of a calculation or user action

✨ HTML5

Definition and Usage

The <output> tag is used to represent the result of a calculation (like one performed by a script) or the outcome of a user action.

The <output> element is typically used in a form to display the results of a calculation or user interaction.

Tip: The <output> element is useful for displaying calculation results, range slider values, or any dynamically computed values in forms.
Note: The <output> element is new in HTML5 and provides semantic meaning to calculation results, improving accessibility.

Browser Support

The <output> tag is supported in all major browsers:

Chrome
Chrome
10.0+
Firefox
Firefox
4.0+
Safari
Safari
7.0+
Edge
Edge
13.0+
Opera
Opera
11.0+

Attributes

Attribute Value Description
for element_id Specifies the relationship between the result of the calculation and the elements used in the calculation (space-separated list of element IDs)
form form_id Specifies which form the output element belongs to
name text Specifies the name of the output element (used to reference the element in JavaScript or to reference form data after submission)

Examples

Simple Calculator Result

Display the result of a basic calculation:

Example

<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>Result: <output name="result" for="a b">0</output></p>
</form>

Range Slider Output

Display the current value of a range slider:

Example

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

  <output name="volume" for="volumeSlider">50</output>%
</form>

Form Calculation with Multiple Inputs

Calculate total price with quantity and unit price:

Example

<form oninput="total.value=(quantity.value*price.value).toFixed(2)">
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" value="1" min="1">

  <label for="price">Unit Price: $</label>
  <input type="number" id="price" name="price" value="10" step="0.01">

  <p>Total: $<output name="total" for="quantity price">10.00</output></p>
</form>

Multiple Inputs Calculation

Calculate the average of multiple numbers:

Example

<form oninput="avg.value=((parseFloat(n1.value)+parseFloat(n2.value)+parseFloat(n3.value))/3).toFixed(2)">
  <label for="n1">Number 1:</label>
  <input type="number" id="n1" name="n1" value="0" step="0.01">

  <label for="n2">Number 2:</label>
  <input type="number" id="n2" name="n2" value="0" step="0.01">

  <label for="n3">Number 3:</label>
  <input type="number" id="n3" name="n3" value="0" step="0.01">

  <p>Average: <output name="avg" for="n1 n2 n3">0.00</output></p>
</form>

Styled Output

Style the output element with CSS:

Example

<style>
  output {
    display: inline-block;
    background: #745af2;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: bold;
    min-width: 60px;
    text-align: center;
  }
</style>

<form oninput="result.value=parseInt(x.value)*parseInt(y.value)">
  <label for="x">X:</label>
  <input type="number" id="x" name="x" value="5">

  <label for="y">Y:</label>
  <input type="number" id="y" name="y" value="10">

  <p>X × Y = <output name="result" for="x y">50</output></p>
</form>

Currency Converter

Create a simple currency converter:

Example

<form oninput="euros.value=(dollars.value*0.85).toFixed(2)">
  <label for="dollars">Dollars ($):</label>
  <input type="number" id="dollars" name="dollars" value="100" step="0.01">

  <p>Euros (€): <output name="euros" for="dollars">85.00</output></p>
  <small>Exchange rate: 1 USD = 0.85 EUR</small>
</form>

Try it Yourself

Interactive Example

Try the calculator below:

Sum: 30

Output vs Input Readonly

  • <output>: Semantic element specifically for displaying calculation results; clearly indicates the value is computed
  • <input readonly>: Input field that cannot be edited; originally designed for user input, not calculation results
  • Accessibility: Screen readers announce <output> as calculation results, improving user understanding
  • Form submission: Both can be submitted with forms when they have a name attribute
  • Default value: <output> can have content between tags; <input> uses the value attribute
Best Practice: Use <output> for calculation results and dynamic values. Use <input readonly> for pre-filled data that shouldn't be edited but isn't calculated.

ARIA Roles and Accessibility

  • The <output> element has an implicit ARIA role of status
  • Screen readers announce output values as live regions when they change
  • Use the for attribute to link output to related input elements
  • Provide a name attribute for form submission and JavaScript reference
  • Use aria-live="polite" if you need to customize announcement behavior
  • Always include labels or context so users understand what the output represents

Best Practices

  • Always use the for attribute to establish relationships with input elements
  • Provide a default value between the <output> tags for initial display
  • Use semantic <output> instead of generic <span> for calculation results
  • Include the name attribute if the output value needs to be submitted with the form
  • Provide clear labels or context to explain what the output represents
  • Consider adding visual styling to make output values stand out
  • Validate and handle edge cases in calculations (division by zero, invalid inputs, etc.)
  • Use appropriate number formatting (toFixed, toLocaleString) for user-friendly display

JavaScript Integration

While the oninput attribute works well for simple calculations, you can also use JavaScript for more complex logic:

Example

<form id="calcForm">
  <input type="number" id="num1" value="10">
  <input type="number" id="num2" value="5">
  <output id="result">15</output>
</form>

<script>
  const form = document.getElementById('calcForm');
  const num1 = document.getElementById('num1');
  const num2 = document.getElementById('num2');
  const result = document.getElementById('result');

  function calculate() {
    result.value = parseInt(num1.value) + parseInt(num2.value);
  }

  num1.addEventListener('input', calculate);
  num2.addEventListener('input', calculate);
</script>

Default CSS Settings

Most browsers will display the <output> element with the following default values:

Default CSS

output {
  display: inline;
}

Related Tags