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:
