HTML <output> Tag – Display Results
📌 Introduction
The <output> tag is used to display the result of a calculation or user action.
It is commonly used in:
- Calculators
- Forms with live results
- Interactive web tools
👉 It is usually updated using JavaScript.
🧱 Syntax
<output>Result</output>
💡 Example (Simple Calculator)
<!DOCTYPE html>
<html>
<head>
<title>Output Example</title>
</head>
<body>
<h2>Simple Addition</h2>
<form oninput="result.value = Number(a.value) + Number(b.value)">
<input type="number" id="a" value="0" />
+
<input type="number" id="b" value="0" />
=
<output name="result">0</output>
</form>
</body>
</html>
🖥️ Output Explanation
- User enters numbers
- Result updates automatically
<output>shows calculated value
🎯 Why <output> is Important
1. 📊 Displays Results
Used to show computed values.
2. ⚙️ Works with Forms
Often used with JavaScript or form events.
3. 🧠 Improves UX
Users see results instantly without reloading the page.
🧩 How It Works
<input /> → calculation → <output></output>
✔ Input → Process → Output
🎨 Example (Styled Calculator)
<form oninput="sum.value = +x.value + +y.value">
<input type="number" id="x" />
+
<input type="number" id="y" />
=
<output name="sum"></output>
</form>
⚖️ <output> vs <div>
| Tag | Purpose |
|---|---|
<output> |
Displays calculated result |
<div> |
Generic container |
🚫 Common Mistakes
- Using
<output>without logic ❌ - Forgetting to update value ❌
- Using it as static text ❌
🧪 Mini Exercise
Create a form that:
- Has two number inputs
- Adds them together
- Displays result in
<output> - Updates automatically when typing