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 the 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"

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

Step 3: Design the first phase of the form name is person details and also apply the style sheet.

Code

<form id=payment>
       <fieldset>
         <legend>Details of Person</legend>
            <ol>
               <li>
                 <label for=name>Person Name</label>
                   <input id=name name=name type=text placeholder="Enter the Name" required autofocus>
                     </li>
                          <li>
                        <label for=email>Person Email</label>
                     <input id=email name=email type=email placeholder="[email protected]" required>
                   </li>
                 <li>
               <label for=phone>Person Phone</label>
             <input id=phone name=phone type=tel placeholder="Eg. [phone]" required>
           </li>
        </ol>
</fieldset>

Step 4 : Apply the style sheet of the form.

Code
              form#payment {
              background: #FFFFFF;
              -moz-border-radius: 5px;
              -webkit-border-radius: 5px;
              -khtml-border-radius: 5px;
              border-radius: 5px;
              counter-reset: fieldsets;
              padding: 20px;
              width: 400px;
              }
                     form#payment fieldset {
                     border: none;
                     margin-bottom: 10px;
                     }
                     form#payment fieldset:last-of-type {
                     margin-bottom: 0;
                     }
                     form#payment legend {
                           color: #CC99FF;
                           font-size: 16px;
                           font-weight: bold;
                           padding-bottom: 10px;
                           text-shadow: 0 1px 1px #c0d576;
                          }

Step 5 : Design the Second phase of form name is Delivery address and also apply the style sheet.

Code:
 
<fieldset>
     <legend>Delivery address</legend>
       <ol>
          <li>
            <label for=address>Person Address</label>
              <textarea id=address name=address rows=5 required></textarea>
                </li>
                   <li>
                  <label for=postcode>Post code</label>
                <input id=postcode name=postcode type=text required>
              </li>
            <li>
          <label for=country>Name of Country</label>
        <input id=country name=country type=text required>
      </li>
    </ol>
  </fieldset>

 

Step 6 : Apply the style sheet of the form.

Code

form#payment ol li {
     background:#CC99FF;
     background: rgba(255,255,255,.3);
     border-color:#99CCFF;
     border-color:#CC99FFF(255,255,255,.6);
     border-style: solid;
     border-width: 2px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    line-height: 30px;
    list-style: none;
    padding: 5px 10px;
    margin-bottom: 2px;
          }
    form#payment ol ol li {
    background: #CC99FF;
    border: none;
    float: left;
          }
    orm#payment label {
    float: left;
    font-size: 13px;
    width: 110px;
               }
                       

Step 7 : Design the Third phase of form name is Detail of card and also apply the style sheet.

Code
 
 <fieldset>
    <legend>Details of Card</legend>
      <ol>
        <li>
           <fieldset>
             <legend>Card type</legend>
               <ol>
                 <li>
                   <input id=visa name=cardtype type=radio>
                     <label for=visa>VISA</label>
                       </li>
                        <li>
                         <input id=amex name=cardtype type=radio>
                           <label for=amex>Credit card</label>
                            </li>
                              <li>
                                <input id=mastercard name=cardtype type=radio>
                                   <label for=mastercard>Debit card</label>
                                 </li>
                              </ol>
                           </fieldset>
                         </li>
                       <li>
                     <label for=cardnumber>Card number</label>
                    <input id=cardnumber name=cardnumber type=number required>
                   </li>
                  <li>
                <label for=secure>Security code</label>
              <input id=secure name=secure type=number required>
            </li>
         <li>
       <label for=namecard>Name on card</label>
     <input id=namecard name=namecard type=text placeholder="Exact name as on the card" required>
    </li>
   </ol>
  </fieldset>
<fieldset>

Step 8 : Apply the style sheet of the form.

Code
 
-webkit-border-radius: 3px;
 -khtml-border-radius: 3px;
 border-radius: 3px;
font: italic 13px Georgia, "Times New Roman", Times, serif;
outline: none;
padding: 5px;
width: 200px;
}                                 
form#payment input:not([type=submit]):focus,
form#payment textarea:focus {
 background: #00FFFF;
   }
 form#payment input[type=radio] {
 float: left;
 argin-right: 5px;
   }
 form#payment button {
 background: #00FFFF;
 border: none;
 -moz-border-radius: 20px;}
 -webkit-border-radius: 20px;
 -khtml-border-radius: 20px;
  brder-radius: 20px;
  color: #00FFFF;
  display: block;
  font: 18px Georgia, "Times New Roman", Times, serif;
  letter-spacing: 1px;
  margin: auto;
  padding: 7px 25px;
  ext-shadow: 0 1px 1px #000000;
  text-transform: uppercase;
    }
  form#payment button:hover {
  background: #1e2506;
  cursor: pointer;
   }

Step 9 : The complete application is.

Output:

 

 

 

Resource:

• A Few Simple Tags in HTML5
• Automated Clearing House (ACH) Tool Using Windows Forms
  
• Using IndexedDb in HTML5 to Store data within the browser
  
• Marshal operations between child forms in an MDI application
  
• Creating Simple Animating Object Using JavaScript in ASP.NET