PUBLISHED ON: JULY 28, 2021
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.
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.
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.
