Introduction
Today, in this article let's
dig out one more concept in HTML5. This concept displays an output when
performed some calculations.
What is Output Tag in Html 5?
In Simple terms "It produces an
output result based on calculations, passed as an input by the user".
So, I think we all are now
good to go and implement this concept.
Step 1: The Complete Code of
Output.html looks like this:
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8"
/>
<!-- Always force latest IE
rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta
http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1"
/>
<title>templates</title>
<meta
name="description"
content=""
/>
<meta
name="author"
content="Vijay"
/>
<meta
name="viewport"
content="width=device-width;
initial-scale=1.0" />
<!-- Replace favicon.ico &
apple-touch-icon.png in the root of your domain and delete these references -->
<link
rel="shortcut icon"
href="/favicon.ico"
temp_href="/favicon.ico"
/>
<link
rel="apple-touch-icon"
href="/apple-touch-icon.png"
temp_href="/apple-touch-icon.png"
/>
</head>
<body
style="text-align:
center; font-family:
Verdana; font-size:
22">
<div>
<header>
<h1
style="color:
gray">Output Tag - HTML 5</h1>
</header>
<form
action=""
id="addform">
<div
align="center">
<table><tr><td>
<input
name="firstnum"
type="number"
required="true"/>
+</td><td>
<input
name="secondnum"
type="number"
required="true"/></td></tr><tr><td><input
type="submit"
value="Calculate"/></td></tr></table>
<table>
<tr>
<td><p>Addition
Result is:</p><b><output
name="addresult"
form="addform"
style="color:
red" onforminput="value
=
firstnum.valueAsNumber + secondnum.valueAsNumber"></output></b></td></tr>
<tr><td><p>Substraction
Result is:</p><b><output
name="addresult"
form="addform"
style="color:
red" onforminput="value
=
firstnum.valueAsNumber - secondnum.valueAsNumber"></output></b></td></tr>
<tr><td><p>Multiplication
Result is:</p><b><output
name="addresult"
form="addform"
style="color:
red" onforminput="value
=
firstnum.valueAsNumber * secondnum.valueAsNumber"></output></b></td></tr>
<tr><td><p>Division
Result is:</p><b><output
name="addresult"
form="addform"
style="color:
red" onforminput="value
=
firstnum.valueAsNumber / secondnum.valueAsNumber"></output></b></td>
</tr>
</table>
</div>
</form>
<footer>
<p
style="color:
silver">© Copyright by Vijay
Prativadi</p>
</footer>
</div>
</body>
</html>
Step 2: The Output of the
Application looks like this:
![Clipboard01.jpg]()