HTML <output> Tag

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:

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:

Supported Browsers:

Google Chrome 10
Edge 18
Firefox 4
Opera 11
Safari 7

Article Tags :

HTML

Web Technologies

HTML-Tags