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

San Francisco 49ers Women’s NFL Mock Wrap Scrub Top – Scarlet, wholesale jerseys, cheap nfl jerseys,Preschool Philadelphia Eagles Starter Green Satin Varsity Jacket., Cheap Jerseys from china, wholesale nfl jerseys


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. Live Character Count with Progress bar 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: