<output>

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.

Attributes

Examples

Simple Calculator Result

Display the result of a basic calculation:

<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:

<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:

<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:

<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:

<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:

<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

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

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:

<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:

output {
  display: inline;
}

Related Tags

• <input>

  Defines an input field

• <form>

  Defines an HTML form

• <label>

  Defines a label for form elements

• <meter>

  Defines a scalar measurement

• <progress>

  Represents task progress

• <select>

  Defines a dropdown list