Post
Ask Question

Output Tag - HTML 5

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:
  1.  <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8" />  
  5.   <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame  
  6.        Remove this if you use the .htaccess -->  
  7.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />   
  8.   <title>templates</title>  
  9.   <meta name="description" content="" />  
  10.   <meta name="author" content="Vijay" />  
  11.   
  12.   <meta name="viewport" content="width=device-width; initial-scale=1.0" />   
  13.   <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->  
  14.   <link rel="shortcut icon" href="/favicon.ico" temp_href="/favicon.ico" />  
  15.   <link rel="apple-touch-icon" href="/apple-touch-icon.png" temp_href="/apple-touch-icon.png" />  
  16. </head>  
  17. <body style="text-align: center; font-family: Verdana; font-size: 22">  
  18.   <div>  
  19.     <header>  
  20.       <h1 style="color: gray">Output Tag - HTML 5</h1>  
  21.     </header>  
  22. <form action="" id="addform">  
  23. <div align="center">  
  24.        <table><tr><td>      <input name="firstnum" type="number" required="true"/> +</td><td>    
  25.  <input name="secondnum" type="number" required="true"/></td></tr><tr><td><input type="submit" value="Calculate"/></td></tr></table>        
  26.        <table>  
  27.               <tr>  
  28.                      <td><p>Addition Result is:</p><b><output name="addresult" form="addform" style="color: red"  onforminput="value =  
  29.                                 firstnum.valueAsNumber + secondnum.valueAsNumber"></output></b></td></tr>  
  30.               <tr><td><p>Substraction Result is:</p><b><output name="addresult" form="addform" style="color: red"  onforminput="value =  
  31.                                 firstnum.valueAsNumber - secondnum.valueAsNumber"></output></b></td></tr>  
  32.                      <tr><td><p>Multiplication Result is:</p><b><output name="addresult" form="addform" style="color: red"  onforminput="value =  
  33.                                 firstnum.valueAsNumber * secondnum.valueAsNumber"></output></b></td></tr>  
  34.                      <tr><td><p>Division Result is:</p><b><output name="addresult" form="addform" style="color: red"  onforminput="value =  
  35.                                 firstnum.valueAsNumber / secondnum.valueAsNumber"></output></b></td>  
  36.               </tr>  
  37.        </table>       
  38. </div>  
  39. </form>  
  40.     <footer>  
  41.      <p style="color: silver">© Copyright  by Vijay Prativadi</p>  
  42.     </footer>  
  43.   </div>  
  44. </body>  
  45. </html> 
Step 2: The Output of the Application looks like this:
 
Clipboard01.jpg


Similar Articles
MVC Corporation
MVC Corporation is consulting and IT services based company.