Reader Level:
ARTICLE

Using HTML5 Tools to Design a Simple Form

Posted by Manish Singh Articles | HTML 5 January 07, 2012
This article helps to show how to design a simple payment form using HTML 5 tools.
  • 0
  • 0
  • 5851

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"

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

<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="Tom001@gmail.com" required>
                   </li>
                 <li>
               <label for=phone>Person Phone</label>
             <input id=phone name=phone type=tel placeholder="Eg. +91-09450324689" required>
           </li>
        </ol>
</
fieldset
>

personempty.gif

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;
                          }

details of person.gif

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
>

 delevary emplt.gif

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;
               }
                       

detaivery address.gif

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
>

detailemply.gif

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;
   }

detail of card.gif

Step 9 : The complete application is.

Output:

 oooooooooooooooooooooooooo.gif

 output.gif

 

Resource:

COMMENT USING

Trending up