HTML | <output> Tag

The <output> tag in HTML 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 end tag.

Syntax:

<output> Results... </output>

Attributes: The output tag contains three attributes which are listed below:

  • 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 the one or more forms of output elements.
  • name: This attribute contains an attribute value name which is used to specify the name of output element.

Below examples illustrate the <output> element in HTML:

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>output Tag</title>
        <style>
            body {
                text-align:center;
            }
            h1 {
                color:green;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <h2><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>
            Result: <output name = "sumresult"></output>
        </form>
    </body>
</html>                    

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>output Tag</title>
        <style>
            body {
                text-align:center;
            }
            h1 {
                color:green;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <h2><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 name = "sumresult" for="A B C"></output>
            <br>
            <input type="submit">
        </form>
    </body>
</html>                    

chevron_right


Output:

Supported Browsers: The browser supported by <output> tag are listed below:

  • Google Chrome 10.0
  • Internet Explorer 13.0
  • Firefox 4.0
  • Opera 11.0
  • Apple Safari 5.1


My Personal Notes arrow_drop_up

I am a technology enthusiast who has a keen interest in programming I am pursuing Engineering in Computer Science from GEU, Dehradun I like to unwind by watching movies and English sitcomsI have a keen interest in music

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.