HTML | <output> Tag - Tutorialspoint.dev

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

HTML | <output> Tag

tags:

leave a comment

0 Comments

Subscribe to Our Newsletter

Top Followed books