deCODE - Our Newsletter for Jan 2022 is available for Download. 🗞   🥳
  Signup/Sign In

How to add sample output within the webpage using HTML?

When designing a webpage there is some situation when we need to add sample output to the webpage. The sample output can easily be added in HTML.

HTML <Output> Tag

The <output> tag is new to HTML 5. It is used to show the result of calculations. It is used within the <form> element. The calculation is performed by javascript. There are some attributes supported by <output> tag.

  • for - This attribute specifies the relation between input values and the resultant output.
  • form - This attribute contains a form-id to associate with the output.
  • name - It is used to assign the name to the output element.

Example: Using output tag in the webpage

Here, we are showing the resultant output of two inputs using the <output> tag.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
    <h2>calculation using output tag</h2>
	<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
	  <input type="range" id="b" name="b" value="50" /> +
	  <input type="number" id="a" name="a" value="10" /> =
	  <output name="result">60</output>
	</form> 
</body>
</html>

Output

Here is the output of the above program.

using output tag

Example: Using for and name attribute with <output> tag

Here, we have used for and name attributes with <output> tag.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
    <h2>calculation using output tag</h2>
	<form oninput="result.value=parseInt(a.value)+parseInt(b.value) +parseInt(c.value)">
	  <input type="number" id="a" name="a" value="10" /> +
	  <input type="range" id="b" name="b" value="50" /> +
	  <input type="number" id="c" name="c" value="20" />=
	  <output name="result" >60</output>
	</form> 
</body>
</html>

Output:

Here is the output of the above program.

using attribute name in output

Conclusion

So we can use the <output> tag to show the result of the calculation. The <output> tag supports global attributes and event attributes. We should use HTML to add output to the webpage.