Home

Creating a Simple CSS-Based Web Form

Submitted by geektips on Sat, 01/12/2008 - 18:04.
Tags:

Still use the same old looking web form on your website? Common man, this the web 2.0 era, its time to make some changes to your old web form and make it a CSS-based form. I made this quick guide to made CSS based web form several hours ago, hope it could help you figure how create a web form using CSS.

This is the structure of our web form in this tutorial. Not to fancy, but still a web 2.0 look and feel.

I used the <fieldset> tag to devide the form in to two section (Personal Data and Account Information), deviding form into several sections will make the form look not to crowded and also will look good in the users point of view.

And Here Goes The Code

form.html



Account Information










style.css

Quick Info

Look at the style below 

input,textarea,select {  
font-family: Arial, Helvetica, sans-serif;
background: #f2f7de;
border: 1px solid #d9e1bb;
margin-bottom: 0.8em;
padding: 0.2em;
overflow: auto;
}

I added overflow: auto; to hide the scrollbar in the textarea so it will only appear when user type too much text in the textarea.

.radiobutton {  
padding: 0;
margin: 0 0 ;
background: none;
border: none;
}

I added this class and use it in the radio button input to overwrite this style:

input,textarea,select {
font-family: Arial, Helvetica, sans-serif;
background: #f2f7de;
border: 1px solid #d9e1bb;
margin-bottom: 0.8em;
padding: 0.2em;
overflow: auto;
}

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Copy the characters (respecting upper/lower case) from the image.