Open In App
Related Articles

HTML <output> name Attribute

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

HTML <output> name attribute specifies the name of the element, which is submitted with the form data when the form is submitted. It’s useful for associating the output with a form element.

HTML <output> name Attribute Syntax: 

<output name="text"> 

HTML <output> name Attribute Values:

It contains the value i.e. name which specifies the name for the <Output> element. 

HTML <output> name Attribute Example: 

In this example, we parse input values, calculate the sum, and display the result in real-time using the output element.

html

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML Output name Attribute
    </title>
</head>
  
<body>
    <center>
        <h1 style="color:green">
        GeeksforGeeks
    </h1>
        <h2>HTML Output name Attribute</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>
    </center>
</body>
  
</html>

                    

Output:

HTML output name attribute example output

HTML <output> name Attribute Example Explanation:

  • In the above-example ontains a form element with three input fields: two number inputs and one range input.
  • The oninput attribute in the form tag calculates the sum of the values entered in the input fields and assigns it to the output element with the name sumresult.
  • The <output> element displays the result of the calculation dynamically as the inputs change.
  • Users can interact with the inputs to see the real-time sum displayed in the output element.

HTML <output> name Attribute Use Cases

1. How to specify a name for the output element in HTML?

To Specify a name for the output element in HTML using the name attribute within the <output> tag.

2.How to define one or more forms the output element belongs to ?

Here we use the form attribute in the <output> tag to specify one or more forms the output element belongs to.

HTML <output> name Attribute Supported Browsers:

  • Google Chrome 10.0
  • Firefox 4.0
  • Edge 18.0
  • Opera 11.0
  • Apple Safari 7.0


Last Updated : 20 Feb, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads