Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Tags

HTML <output> Tag

Written by Updated

The <output> tag is used to display the result of a calculation or user action in a form.
It is commonly used with JavaScript to show dynamic results like sums, percentages, or other computed values.

The <output> element is often linked to one or more input elements using the for attribute.

Syntax

html

<output for="input1 input2">Result</output>

Attributes

AttributeDescription
forLists IDs of elements that contribute to the output.
formAssociates the output with a specific form.
nameAssigns a name to the output element.
idAssigns a unique ID.

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Output Tag Example</title>
</head>
<body>
  <h2>Sum Calculator</h2>
  <form oninput="result.value = parseInt(num1.value) + parseInt(num2.value)">
        <label for="num1">Number 1:</label>
        <input type="number" id="num1" value="">
        <br>
        <label for="num2">Number 2:</label>
        <input type="number" id="num2" value="">
        <br>
        <br>
        Output = <output name="result" for="num1 num2"></output>
   </form>
</body>
</html>

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

All major browser supports <output> tag.

Notes

  • The <output> element is designed for displaying calculated results.
  • Can be linked to one or more inputs using the for attribute.
  • Supports dynamic updates via JavaScript.
  • Improves form clarity by showing real-time results without additional labels.

Conclusion

The <output> tag is useful for displaying results in forms dynamically.
It provides a semantic way to show calculations or other computed outputs in modern HTML.

PreviousHTML <datalist> TagNextHTML <meter> Tag