HTML Tags
HTML <output> Tag
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
html
<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
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+ |
|---|---|---|---|---|---|
| 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.