Skip to content
Related Articles

Related Articles

Improve Article

HTML <output> Tag

  • Difficulty Level : Easy
  • Last Updated : 15 Feb, 2021

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
  • Internet Explorer 13.0
  • Firefox 4.0
  • Opera 11.0
  • Apple Safari 5.1

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :