HTML <output> Tag
Last Updated :
28 Dec, 2023
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:
|
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:Â 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;">
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>
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;">
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 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...