Tutorialspoint.dev

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:



<!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>                    

Output:

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

<!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>                    

Output:

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

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


This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter