Skip to content
Related Articles

Related Articles

HTML <output> Tag

View Discussion
Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 06 Jun, 2022
View Discussion
Improve Article
Save Article

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 ends tag.
 

Syntax: 

<output> Results... </output>

Attributes: The output tag accepts 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 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: 

html




<!DOCTYPE html>
<html>
 
<body>
    <h1>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>
 
<body>
    <h1>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.0 and above
  • Edge 18 and above
  • Firefox 4.0 and above
  • Opera 11.0 and above
  • Apple Safari 7 and above
  • Internet Explorer not supported 

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!