Post
Ask Question

Using HTML5 Tools to Design a Simple Form

Introduction

 
This article helps to show how to design a simple payment form using HTML 5 tools. We know that HTML is an acronym for "HyperText Markup Language" that is used to display data in a browser. HTML 5 is the advanced version of HTML for developing 3D or animated applications. In this application, we have implemented some designing tools and developed a simple payment form. HTML5 is the latest version of HTML (Hypertext Markup Language). It is an ongoing process that took place by the combined efforts of World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group. The initial phase for the development of HTML5 started in 2004 by Web Hypertext Application Technology Working Group that has been developed and edited by David Hyatt of Apple and Ian Hickson of Google. The extension for HTML is ".html".
 
Step 1: Open Notepad.
  • Click->Start button->Notepad
  • Give the file a name of your choice
  • Click New button->save
  • There the name is "Tom.html"
notepad.gif
 
Step 2: Create a Folder.
  • Right click of Desktop Screen-> New-> Folder
  • Name of Folder is "Manish"
  • Finally, all HTML files and related sources are saved in that folder
folder.gif
 
Step 3: Design the first phase of the form name is person details and also apply the style sheet.
 
Code
  1. <form id=payment>  
  2.     <fieldset>  
  3.         <legend>Details of Person</legend>  
  4.         <ol>  
  5.             <li>  
  6.                 <label for=name>Person Name</label>  
  7.                 <input id=name namename=name type=text placeholder="Enter the Name" required autofocus>  
  8.                 </li>  
  9.                 <li>  
  10.                     <label for=email>Person Email</label>  
  11.                     <input id=email name=email type=email placeholder="[email protected]" required>  
  12.                     </li>  
  13.                     <li>  
  14.                         <label for=phone>Person Phone</label>  
  15.                         <input id=phone name=phone type=tel placeholder="Eg. +91-09450324689" required>  
  16.                         </li>  
  17.                     </ol>  
  18.                 </fieldset>  
 
personempty.gif
 
Step 4: Apply the style sheet of the form.
 
Code           
  1. form#payment {  
  2.              background: #FFFFFF;  
  3.              -moz-border-radius: 5px;  
  4.              -webkit-border-radius: 5px;  
  5.              -khtml-border-radius: 5px;  
  6.              border-radius: 5px;  
  7.              counter-reset: fieldsets;  
  8.              padding: 20px;  
  9.              width: 400px;  
  10.              }  
  11.                     form#payment fieldset {  
  12.                     border: none;  
  13.                     margin-bottom: 10px;  
  14.                     }  
  15.                     form#payment fieldset:last-of-type {  
  16.                     margin-bottom: 0;  
  17.                     }  
  18.                     form#payment legend {  
  19.                           color: #CC99FF;  
  20.                           font-size: 16px;  
  21.                           font-weight: bold;  
  22.                           padding-bottom: 10px;  
  23.                           text-shadow: 0 1px 1px #c0d576;  
  24.                          }  
details of person.gif
 
Step 5: Design the Second phase of form name is Delivery address and also apply the style sheet.
 
Code:
  1. <fieldset>  
  2.     <legend>Delivery address</legend>  
  3.     <ol>  
  4.         <li>  
  5.             <label for=address>Person Address</label>  
  6.             <textarea id=address name=address rows=5 required></textarea>  
  7.         </li>  
  8.         <li>  
  9.             <label for=postcode>Post code</label>  
  10.             <input id=postcode name=postcode type=text required>  
  11.             </li>  
  12.             <li>  
  13.                 <label for=country>Name of Country</label>  
  14.                 <input id=country name=country type=text required>  
  15.                 </li>  
  16.             </ol>  
  17.         </fieldset>  
 delevary emplt.gif
 
Step 6: Apply the style sheet of the form.
 
Code
  1. form#payment ol li {  
  2.      background:#CC99FF;  
  3.      background: rgba(255,255,255,.3);  
  4.      border-color:#99CCFF;  
  5.      border-color:#CC99FFF(255,255,255,.6);  
  6.      border-style: solid;  
  7.      border-width: 2px;  
  8.     -moz-border-radius: 5px;  
  9.     -webkit-border-radius: 5px;  
  10.     -khtml-border-radius: 5px;  
  11.     border-radius: 5px;  
  12.     line-height: 30px;  
  13.     list-style: none;  
  14.     padding: 5px 10px;  
  15.     margin-bottom: 2px;  
  16.           }  
  17.     form#payment ol ol li {  
  18.     background: #CC99FF;  
  19.     border: none;  
  20.     float: left;  
  21.           }  
  22.     orm#payment label {  
  23.     float: left;  
  24.     font-size: 13px;  
  25.     width: 110px;  
  26.                }                   
detaivery address.gif
 
Step 7: Design the Third phase of form name is Detail of card and also apply the style sheet.
 
Code
  1. <fieldset>  
  2.     <legend>Details of Card</legend>  
  3.     <ol>  
  4.         <li>  
  5.             <fieldset>  
  6.                 <legend>Card type</legend>  
  7.                 <ol>  
  8.                     <li>  
  9.                         <input id=visa name=cardtype type=radio>  
  10.                             <label for=visa>VISA</label>  
  11.                         </li>  
  12.                         <li>  
  13.                             <input id=amex name=cardtype type=radio>  
  14.                                 <label for=amex>Credit card</label>  
  15.                             </li>  
  16.                             <li>  
  17.                                 <input id=mastercard name=cardtype type=radio>  
  18.                                     <label for=mastercard>Debit card</label>  
  19.                                 </li>  
  20.                             </ol>  
  21.                         </fieldset>  
  22.                     </li>  
  23.                     <li>  
  24.                         <label for=cardnumber>Card number</label>  
  25.                         <input id=cardnumber name=cardnumber type=number required>  
  26.                         </li>  
  27.                         <li>  
  28.                             <label for=secure>Security code</label>  
  29.                             <input id=secure name=secure type=number required>  
  30.                             </li>  
  31.                             <li>  
  32.                                 <label for=namecard>Name on card</label>  
  33.                                 <input id=namecard name=namecard type=text placeholder="Exact name as on the card" required>  
  34.                                 </li>  
  35.                             </ol>  
  36.                         </fieldset>  
  37.                         <fieldset>  
detailemply.gif
 
Step 8: Apply the style sheet of the form.
 
Code
  1. -webkit-border-radius: 3px;  
  2.  -khtml-border-radius: 3px;  
  3.  border-radius: 3px;  
  4. font: italic 13px Georgia, "Times New Roman", Times, serif;  
  5. outline: none;  
  6. padding: 5px;  
  7. width: 200px;  
  8. }                                    
  9. form#payment input:not([type=submit]):focus,  
  10. form#payment textarea:focus {  
  11.  background: #00FFFF;  
  12.    }  
  13.  form#payment input[type=radio] {  
  14.  float: left;  
  15.  argin-right: 5px;  
  16.    }  
  17.  form#payment button {  
  18.  background: #00FFFF;  
  19.  border: none;  
  20.  -moz-border-radius: 20px;}  
  21.  -webkit-border-radius: 20px;  
  22.  -khtml-border-radius: 20px;  
  23.   brder-radius: 20px;  
  24.   color: #00FFFF;  
  25.   display: block;  
  26.   font: 18px Georgia, "Times New Roman", Times, serif;  
  27.   letter-spacing: 1px;  
  28.   margin: auto;  
  29.   padding: 7px 25px;  
  30.   ext-shadow: 0 1px 1px #000000;  
  31.   text-transform: uppercase;  
  32.     }  
  33.   form#payment button:hover {  
  34.   background: #1e2506;  
  35.   cursor: pointer;  
  36.    }  
detail of card.gif
 
Step 9: The completed application is.
 
Output:
 
 oooooooooooooooooooooooooo.gif
 
 output.gif
 
Resource:


Similar Articles