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:
You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.
Become a sharper developer and jumpstart your career.
$0
$
. 00
monthly
For Basic members:
$20
For Premium members:
$45
For Elite members: