The <output> tag in HTML is used to display the result of a calculation or user action. It is commonly used in forms to show dynamic output generated by scripts.
- Displays the result of calculations or user interactions.
- Commonly used with JavaScript and form elements.
- Helps show dynamic and real-time output on webpages.
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: for specifies the relationship between the calculation and the result element.
- form: form defines one or more forms to which the <output> element belongs.
- name: name specifies the name of the <output> element.
Example 1: Implementation of output tag with an example.
<!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>
<!-- output tag -->
Result: <output name="sumresult"></output>
</form>
</body>
</html>
Example 2: <output> tag is used with for and form attribute.
<!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 tag -->
<output name="sumresult"
for="A B C">
</output>
<br>
<input type="submit">
</form>
</body>
</html>