Designing a form using pure CSS enhanced with Jquery

• Tweet

• Tweet

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>

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 :

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 :

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

Tagged as: CSS, Forms, Jquery