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="[email protected]"
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: