Thanks to visit codestin.com
Credit goes to www.geeksforgeeks.org

Open In App

HTML <output> Tag

Last Updated : 11 Jul, 2025
Comments
Improve
Suggest changes
4 Likes
Like
Report

The HTML <output> tag is used to represent the result of a calculation performed by the client-side script such as JavaScript. The <output> tag is a new tag in HTML 5, and it requires a starting and ending tag.

It also supports the Global Attributes and Event Attributes in HTML. The content within the <output> tag can be manipulated dynamically through JavaScript.

Syntax

<output> Results... </output>

Attributes

Attribute Value

Description

for

This attribute contains an attribute value element_id which is used to specify the relation between result and calculations.

form

This attribute contains an attribute value form_id which is used to specify one or more forms of output elements.

name

This attribute contains an attribute value name that is used to specify the name of the output element.

Example 1: In this example, we will see the implementation of output tag with an example.

html 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h2>
        HTML output Tag
    </h2>
    <form oninput="sumresult.value = 
     parseInt(A.value) + parseInt(B.value) +
     parseInt(C.value)">
        <input type="number" name="A" value="50" /> +
        <input type="range" name="B" value="0" /> +
        <input type="number" name="C" value="30" />
        <br>
        <!-- output tag -->
        Result: <output name="sumresult"></output>
    </form>
</body>

</html>

Output: 
rgh


Example 2: In this example, <output> tag is used with for and form attribute. 

html 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h2>
        HTML output Tag
    </h2>
    <form oninput="sumresult.value = 
         parseInt(A.value) + parseInt(B.value) +
         parseInt(C.value)">
        <input type="number" 
               name="A" value="50" /> +
        <input type="range" 
               name="B" value="0" /> +
        <input type="number" 
               name="C" value="50" />
        <br /> Submit Result:
        <!-- output tag -->
        <output name="sumresult" 
                for="A B C">
        </output>
        <br>
        <input type="submit">
    </form>
</body>

</html>

Output: 

hyt

Supported Browsers


S

Shubrodeep Banerjee
Improve
Article Tags :

Explore

Lightbox