PSD-HTML. These Pixel perfect HTML pages will be tested on Chrome, Firefox, IE, Safari on OS X and Windows Imajine will help you create your own fan page in facebook with an eye appealing graphic banner for its welcome page Custom CMS theme building weboranje.com - showcase of inspirational web 2.0 websites
Tutorial on HTML5 form fieldset elements

HTML5 is the new generation of HTML. After the release of the first version of HTML, a lot of changes have been incorporated in HTML time and again, which lead to the introduction of HTML5. HTML5 has many new features added to it, like functions for embedding audio, video, graphics etc. Apart from the features mentioned above, there are many others, one of which includes several new elements and attributes for forms. This tutorial introduces you to some of the basic form elements in HTML5.

The Final Output as obtained in Google Chrome and Mozilla Browsers is shown below:

Please Note:The hover effect given to text fields and to the button, shows only in Mozilla. Other than that the output obtained for both Chrome and Mozilla browsers is the same.

Personal details
Card details
  1. Card type

Firstly, we have given a set of code for our background, which has been displayed below.

form, fieldset, legend, ol, li {
margin: 0;
padding: 0;
}
body
{ background-image:url(form_bg.png);
color: #111111;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}

The below mentioned instructions, have been given so as to provide style, to the base of the form.

Limitations on Different Browsers:

/* The gradient effect shows in Google, Mozilla(version 3.6 and above) and IE(linear gradient only) browsers.*/
/* The text shadow effect shows only in Google Chrome Browsers. */
/* The rounded corners effect does not show in IE browsers.*/

form#payment
{
background: #0373B6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0373B6), to(#2B89C1));
background-image: -moz-linear-gradient(top, #0373B6, #2B89C1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0373B6, endColorstr=#2B89C1);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .4);
border-radius: 5px;
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: #024B77;
font-size: 18px;
font-weight: bold;
padding-bottom: 10px;
text-shadow: 0 1px 1px #038BDC;
}

form#payment > fieldset > legend:before
{
content: "Step " counter(fieldsets) ": ";
counter-increment: fieldsets;
}

The code mentioned above, is for the main headings on the main blue base.

We have provided backgrounds to our text fields. Since the whole form follows a particular format, We have used "ol" and "li" tags for the same. Following code helps us to do the same, for both the base and the name of the text field (for 'card type' heading).

form#payment fieldset fieldset legend
{
color: #111111;
font-size: 13px;
font-weight: normal;
padding-bottom: 0;
}

form#payment ol li
{
/* li background and border color for IE browers */
background: #80B8DA;
border-color: #99C6E1;
/* The rounded corners effect does not show in IE browsers.*/
/* li background and border color for google and mozila browsers*/
background: rgba(255,255,255,.5);
border-color: rgba(255,255,255,.2);
border-style:solid;
border-width: 2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}

The next few set of lines in the codes, have been used, especially for the Card details block. For example, with the help of below mentioned lines, we can change the background of the three card options, which is not given, as of now.

form#payment ol ol li
{
background: none;
border: none;
float: left;
}

The set of instructions given below, has been used for giving style to the field names.

form#payment label
{
float: left;
font-size: 13px;
width: 110px;
}

form#payment fieldset fieldset label
{
background:none no-repeat left 50%;
line-height: 20px;
padding: 0 0 0 30px;
width: auto;
}

form#payment label[for=visa]
{
background-image: url(visa.gif);
}

form#payment label[for=amex]
{
background-image: url(amex.gif);
}

form#payment label[for=mastercard]
{
background-image: url(mastercard.gif);
}

form#payment fieldset fieldset label:hover
{
cursor: pointer;
}

There are text areas for the various fields. The following code has been used to give the desired effects(like the hover effect) to the text fields. In HTML 5, we can specify 'input' types. Like for example, if we specify input type as 'radio', then that particular form element / field will be recognised as group of radio buttons, if input type is specified as 'submit', then that particular form element / field will be recognised as 'submit' button. Defining these input types are covered in the syntax / code / styles below.

/* The rounded corners effect does not show in IE browsers.*/

form#payment input:not([type=radio]),

form#payment textarea
{
background: #4B9BCB;
border: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
font: italic 11px Georgia, "Times New Roman", Times, serif;
outline: none;
padding: 5px;
width: 200px;
color:#111111;
}

/* The hover effect shows only in Google Chrome Browsers. */
form#payment input:not([type=submit]):hover,
form#payment textarea:hover
{
background: #E4E4E4;
}

form#payment textarea:focus
{
background: #cccccc;
}

form#payment input[type=radio]
{
float: left;
margin-right: 5px;
}

The code stated above, is simply for the second section with all the card details.

/* The rounded corners effect does not show in IE browsers.*/

form#payment button
{
background: #003366;
border: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
display: block;
font: 18px Georgia, "Times New Roman", Times, serif;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
text-shadow: 0 1px 1px #000000;
text-transform: uppercase;
}

/* The hover effect shows only in Google Chrome Browsers. */
form#payment button:hover
{
background: #C5E9FE;
color:#003366;
cursor: pointer;
}

This last piece of code, specified above, is for the button used in the Form. Hover effect has also been given for the same.

Thus, with the help of this Tutorial, you can manage a very basic form in HTML5.

Tags: HTML5 form, HTML5 form elements

 

Bookmark and Share
HI, AM JAY, AND I IMAJINE
I am a freelance web designer and web application developer with over 7 years of result oriented experience. I am accustomed to working in a dynamic and goal oriented client environment. My strengths include the ability to visualize, personalize and create a truly unique and enthralling web presence. My passion apart from web design, logo design, Flash animation / actionscripting, CMS Customization, print and web development includes photography, game programming, tutorial development (includes Adobe Flash, Adobe Fireworks and Adobe Photoshop) and blogging.
Read more about me...
CONTACT US
Name :  
Email Address :  
 
Comments :
 
jayanthi.varma@imajine.in  |  © 2008 - 2012 Imajine.