HTML <output> Tag
The HTML <output> tag 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 ending tag.
It also supports the Global Attributes and Event Attributes in HTML. The content within the <output> tag can be manipulated dynamically through JavaScript.
Syntax:
<output> Results... </output>
Attributes:
Attribute Value |
Description |
---|---|
This attribute contains an attribute value element_id which is used to specify the relation between result and calculations. |
|
This attribute contains an attribute value form_id which is used to specify one or more forms of output elements. |
|
This attribute contains an attribute value name that is used to specify the name of the output element. |
Example 1: In this example, we will see the implementation of output tag with an example.
html
<!DOCTYPE html> < html lang = "en" > < head > < title >Document</ title > < style > body { text-align: center; } </ style > </ head > < body > < h1 style = "color: green;" > w3wiki </ 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 lang = "en" > < head > < title >Document</ title > < style > body { text-align: center; } </ style > </ head > < body > < h1 style = "color: green;" > w3wiki </ 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
- Edge 18
- Firefox 4
- Opera 11
- Safari 7
Contact Us