HTML Output Tag | Display Calculation Results

HTML Output Tag

The HTML <output> tag is used to display the result of a calculation or user action in a web page. It is commonly used in forms, JavaScript-based calculations, and interactive applications where results need to be shown dynamically. It improves semantic structure and user experience.

3 views

5 min read

What is Output Tag?

The <output> tag shows the result of a calculation or user action. It updates automatically.

Basic calculator:

1<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
2    <input type="number" id="a" value="10"> +
3    <input type="number" id="b" value="20"> =
4    <output name="result" for="a b">30</output>
5</form>

How it works:

oninput = every time user types something, run this code
parseInt() = convert text to number
output = shows the result

Range slider with live output:

1<form oninput="rangeValue.value = range.value">
2    <input type="range" id="range" value="50" min="0" max="100">
3    <output name="rangeValue" for="range">50</output>
4</form>

Attributes:

Attribute	What it does
`for`	Lists IDs of elements that affect this output (space separated)
`name`	Name of the output (for form submission)