Output HTML

HTML <output> Tag

To display the result of the certain calculation or the outcome of a user action the HTML <output> tag is used. It was introduced in HTML5.

Syntax:

<output>......</output>

Example:

<!DOCTYPE html>
<html>
<body>
<form oninput="z.value=parseInt(x.value)+parseInt(y.value)">
<label>First Value:</label><br><br>
<input type="number" id="y" value="100"><br><br>+<br><br>
<label>Second Value:</label><br><br>
0<input type="range" id="x" value="100">100
<br><br>=<br><br>
<label>Output:</label>
<output name="z" for="x y"></output>
</form>
</body>
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are using the <output> tag to display the result of the addition of two numbers.

Tag-specific attributes:

Attribute Value Uses
for element_id Used to define the relationship between the result of the calculation and the input elements.
form form_id Used to define the form or forms to which the output element is associated with.
name name Used to add a name for the output element.

Global attributes:

The HTML global attributes are supported by the HTML <output> tag.

Event attributes:

The HTML event attributes are supported by the HTML <output> tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera and Safari.

Please Share