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 theforattribute.
Syntax
<output for="input1 input2">Result</output>Attributes
| Attribute | Description |
|---|---|
| for | Lists IDs of elements that contribute to the output. |
| form | Associates the output with a specific form. |
| name | Assigns a name to the output element. |
| id | Assigns a unique ID. |
Example
<!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>Output
Browser Output
You will see two number input fields.
As you type numbers, the sum is dynamically displayed in the output element.
Use our TryIt Editor to experiment with live calculation updates.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
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
forattribute. - 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.
