Post image for Designing a form using pure CSS enhanced with Jquery

Designing a form using pure CSS enhanced with Jquery

by Hyder

in Html & CSS, Jquery

Web Forms are a fundamental part of web design . From small login forms to complex administration panels, forms are probably the most important interactive elements in a web application.Some peaple prefer to design forms using table whereas some prefer a tabless design using pure CSS .In this tutorial,i have created a form using pure css and i have skinned the form elements such as textbox,drop down list ,radio button using a Jquery Plugin .

Online Demo || Download Source Code


The CSS Part

The body of the pageĀ  will use this font size and family.


<style type="text/css">
body {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

The code snippet below will center the Registration form .

.registration_form {
margin:0 auto;
width:500px;
padding:14px;
}

And the rest of the css code is pretty easy !I used <label> for the name of each input element and they are all set to float to the left .

label {
width: 10em;
float: left;
margin-right: 0.5em;
display: block
}
.submit {//Code to place the submit putton
float:right;
}
fieldset {
background:#EBF4FB none repeat scroll 0 0;//Gives the form a nice blue background
border:2px solid #B7DDF2;//with a blue border
width: 500px;//of width 500 pixel
}
legend {
color: #fff;
background: #80D3E2;
border: 1px solid #781351;
padding: 2px 6px
}
.elements {
padding:20px;//space between each form element
}
p {
border-bottom:1px solid #B7DDF2;
color:#666666;
font-size:11px;
margin-bottom:20px;
padding-bottom:10px;
}
</style>


<style type=”text/css”>
body {
font-family:”Lucida Grande”, “Lucida Sans Unicode”, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
.registration_form {
margin:0 auto;
width:500px;
padding:14px;
}
label {
width: 10em;
float: left;
margin-right: 0.5em;
display: block
}
.submit {
float:right;
}
fieldset {
background:#EBF4FB none repeat scroll 0 0;
border:2px solid #B7DDF2;
width: 500px;
}
legend {
color: #fff;
background: #80D3E2;
border: 1px solid #781351;
padding: 2px 6px
}
.elements {
padding:20px;
}
p {
border-bottom:1px solid #B7DDF2;
color:#666666;
font-size:11px;
margin-bottom:20px;
padding-bottom:10px;
}

The HTML part

<form action="#" class="registration_form">
  <fieldset>
    <legend>Registration Form </legend>
    <p>Create A new Account </p>
    <div class="elements">
      <label for="name">Name :</label>
      <input type="text" id="name" size="25" />
    </div>
    <div class="elements">
      <label for="e-mail">E-mail :</label>
      <input type="text" id="e-mail" size="25" />
    </div>
    <div class="elements">
      <label for="question">Security Questions :</label>
      <select name="question">
        <option value="1">What was your First Phone Number</option>
        <option value="2">In Which City were you born ?</option>
        <option value="3">Another Question</option>
      </select>
    </div>
    <div class="elements">
      <label for="gender">Gender:</label>
      <input name="gender" type="radio" value="Male" checked />
      <label for="gender">Male </label>
      <input name="gender" type="radio" value="Female"  />
      Female </div>
    <div class="elements">
      <label for="Password">Password:</label>
      <input type="password" id="Password" size="25" />
    </div>
    <div class="submit">
      <input type="submit" value="Submit" />
    </div>
  </fieldset>
</form>

At this stage your form will look something to this :

Before Skinning Form CSS using Jquery

Skinning using the Jquery Plug in

Download the jQtransform and add the appropriate files to the head section of your page .


<link rel="stylesheet" href="jqtransformplugin/jqtransform.css" type="text/css" media="all" />
<script type="text/javascript" src="jquery-1.3.2.js" ></script>
<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js" ></script>
<script language="javascript">
$(function(){
$('form').jqTransform({imgPath:'jqtransformplugin/img/'});
});
</script>

You should finally get this :

After Skinning the CSS Form using the Jquery Plug in

I would like your views on the above form . Do you prefer Tableless CSS Form design or the good old way of designing forms using tables ?

Related Posts

  1. Username Availability Check in Registration Form using Jquery/PHP
  2. Create fancy contact form with CSS 3 and jQuery
  3. Creating Message boxes using css with fadein Effects using jquery
  4. Google Plus Click Animation effect on Stream Page using Jquery
  5. How to build a CSS3 drop down menu
After Post

{ 2 trackbacks }

Building A registration System with Email verification in PHP
April 1, 2010 at 2:34 pm
13 Effective Free jQuery Plugins that Enhance Your Forms | Free and Useful Online Resources for Designers and Developers
October 26, 2012 at 1:34 pm

{ 6 comments… read them below or add one }

Abdallah May 2, 2010 at 10:07 pm

thx bro…ur awesome

Reply

Abdallah May 2, 2010 at 10:16 pm

I like it simple and neat like zis :)

Reply

Syed Haider Hassan December 16, 2010 at 12:50 pm

Really nice one..good..
i have black theme..what color code do you suggest for border and background that i should apply..
i like it the background it light and borders are dark..
tell me combination for black ones like you did for blue.

Reply

Free 3D Models March 16, 2012 at 8:42 pm

Awesome

Reply

makarand March 17, 2012 at 9:48 am

Thanks for this form, Very easy and useful !

Reply

yuki January 19, 2014 at 3:31 pm

Nice form! thx!

Reply

Leave a Comment

Previous post:

Next post: