Spice Up Your Forms With a bit of CSS and HTML alignment

[Unholy Prayer 0]

Ever wonder how to make those stylish forms you see everywhere? Well now it's your change to learn. This short tutorial will show you how to do exactly that.

 

Here is a bit of css to spice up the form. I have included comments to explain what classes will change what in the forms.

 

<style type='text/css'>.form table { background-color: #187cae;}/*The following css class will change the table cells within the .form div */.form td { background-color: #bbe0f4;		   padding: 3px;		   border: 0px;		   font-family: verdana;		   font-size: 10px;		   color: #187cae;}/*This bit of css will change the look of the text inputs */.form input { background-color: #82c3e5;			  text-align: center;			  border: 1px solid #187cae;			  font-family: verdana;			  font-size: 10px;			  color: #187cae;}/*This will change the look of the dropdown menus */.form select { background-color: #82c3e5;			  text-align: center;			  border: 1px solid #187cae;			  font-family: verdana;			  font-size: 10px;			  color: #187cae;}/*This css will change the look of the text areas */.form textarea { background-color: #82c3e5;			  text-align: center;			  border: 1px solid #187cae;			  font-family: verdana;			  font-size: 10px;			  color: #187cae;}</style>

You can change the css to fit your website if you like. Here is the body of the html form I used.

 

<div class='form'><table align='center' cellspacing='1' cellpadding='1' border='0'>   <tr>	 <td colspan='2' align='center'>All About You</td>	<form action='mailto:bob@yahoo.com' method='POST'>   </tr><tr>	 <td align='right'>Age: </td>	 <td align='left'><input type='text' name='age' size='30'></td>   </tr><tr>	 <td align='right'>Favorite Color: </td>	 <td align='left'><select name='color'>					  <option selected value='Blue'>Blue					  <option value='Green'>Green					  <option value='Orange'>Orange					  <option value='yellow'>Yellow					  <option value='purple'>Purple					  <option value='red'>Red					  </select></td>   </tr><tr>	 <td align='right'>What hand do you use?</td>	 <td align='left'><input type='radio' value='left' name='hand'>Left <input type='radio' value='right' name='hand'>Right</td>   </tr><tr>	 <td align='right'>Your Hobbies: </td>	 <td align='left'><textarea name='hobbies' rows='5' cols='15'></textarea></td>   </tr><tr>	 <td align='center' colspan='2'><input type='submit' name='submit' value='Submit'> <input type='reset' value='Reset'></td>		</form></tr></table></div>

Here is a result of my form.

 

And there you have it. A simple and easy way to give your forms some style. I hope this was of use to everyone that is learning HTML.

[jlhaslip 4]

Nice stuff, but I don't use tables for lay-out. Could you do this Tutorial for a css layout?

[Damen 0]

Very nice, acceptable.I use CSS with my forms mainly for buttons but CSS is good for everything!Thanks for the tips!

[delivi 0]

Nice Styling using CSS, but I'd prefer using DIVs instead of using Tables.With using DIVs you can even customise your site with multiple Style Sheets and also make your site appear viewable in Handheld and Mobile devices.Tables have become the things of the past, but there are certain situations where only tables will be helpful

[Blessed 0]

Greetingsnice tutorial you have here m8i sure can use this tutorial on my siteand i like the stylesheet..thnax

[TripleH13 0]

thanks for this great tutorial. I could really use something like this.

[Casino.Royale 0]

Thats a pretty nice tutorial and a good ending result. Nice job on it, I might try it out for a form for my website.

[hippiman 0]

Thanks! You should have put this up sooner. I'd been looking around for something on css and how to use it with div's for a while. If I would have found this tutorial sooner, I might have been able to use it a lot more on my site at the beginning.

[reconraiders 0]

Good stuff. Not all browsers accept CSS styling for all the form elements yet. They will soon enough though I'm sure. But beware of browser compatibility issues.

[html 0]

Thanks Nice sharing

[zamaliphe 0]

very nice i like it allot hop you know some thing about joomla don't you ?

[pop 0]

CSS forms are just what i needed. many people here disagree on using div for forms but i think that even with table you can make good form, and fast too. thank you for your tutorial.