HTML <output> name Attribute
Last Updated :
20 Feb, 2024
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 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
To Specify a name for the output element in HTML using the name attribute within the <output> tag.
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
Share your thoughts in the comments
Please Login to comment...