 Spice Up Your Forms, With a bit of CSS and HTML alignment |
Rating
|
|
|
|
|
  |
 Apr 28 2007, 08:06 PM
Post
#1
|
|
|
Newbie [Level 2]  Group: Members Posts: 36 Joined: 27-December 05 Member No.: 16,252  |
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. CODE <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. CODE <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. |
 |
 
|
|
May 12 2007, 01:53 PM
Post
#2
|
|
|
A computer once beat me at chess, but it was no match for me at kick boxing.  Group: [MODERATOR] Posts: 4,085 Joined: 24-July 05 From: Linix, DOS and Windows…the good, the bad and the ugly Member No.: 9,787  |
Nice stuff, but I don't use tables for lay-out. Could you do this Tutorial for a css layout?
|
|
|
|
|
May 12 2007, 02:01 PM
Post
#3
|
|
|
Super Member Group: [HOSTED] Posts: 245 Joined: 9-April 07 From: Nebraska Member No.: 41,342 |
Very nice, acceptable.
I use CSS with my forms mainly for buttons but CSS is good for everything! Thanks for the tips! |
|
|
|
|
May 12 2007, 02:35 PM
Post
#4
|
|
|
Trap Grand Marshal Member Group: [HOSTED] Posts: 1,314 Joined: 11-January 06 From: Chennai, India Member No.: 16,932 |
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 
|
|
|
|
|
May 12 2007, 09:12 PM
Post
#5
|
|
|
Advanced Member Group: Members Posts: 144 Joined: 22-March 07 Member No.: 40,472 |
Greetings
nice tutorial you have here m8 i sure can use this tutorial on my site and i like the stylesheet.. thnax |
|
|
|
|
May 13 2007, 04:18 AM
Post
#6
|
|
|
Privileged Member Group: Members Posts: 621 Joined: 26-August 05 Member No.: 11,160 |
thanks for this great tutorial. I could really use something like this.
|
|
|
|
|
May 14 2007, 03:14 AM
Post
#7
|
|
|
Member [Level 3] Group: Members Posts: 93 Joined: 27-March 07 Member No.: 40,712 |
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.
|
|
|
|
|
May 30 2007, 01:12 AM
Post
#8
|
|
|
Premium Member Group: Members Posts: 150 Joined: 9-April 07 From: Nebraska Member No.: 41,301 |
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.
|
|
|
|
|
Jun 10 2007, 06:52 PM
Post
#9
|
|
|
Super Member Group: Members Posts: 221 Joined: 6-June 07 Member No.: 44,288 |
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.
|