Aquileo | HTML <output> name Attribute

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

HTML <output> name Attribute