| Stylish and accessible forms in CSS | | | | If you look through the code you will see |
| | | | some tags which you may deem as unnecessary |
| The majority of sites designed these days | | | | (i.etags after the radio button). These are |
| have at least one form. If you're a web | | | | to enable a cross browser compatible layout. |
| designer then you'll know that creating a | | | | Within the CSS code you will notice at the |
| template is essential if you are to be | | | | beginning that all the margins and padding |
| efficient in your work. Many times I've | | | | are set to zero. Alternatively you could |
| compromised on a form's design due to time | | | | place the form in a div with zero margins and |
| restrictions. Below is a template that I use | | | | padding but it is entirely up to you. |
| and that is quite flexible in its design. | | | | |
| This form allows for any type of input field | | | | CSS Code |
| from a simple textfield to a group of radio | | | | |
| buttons. If your quite comfortable with CSS | | | | * { margin: 0; padding: 0; } |
| then please feel free to adapt this code. | | | | form.cssform { width: 430px; |
| The fun you can have with this form can | | | | font-size: 0.8em; |
| really change the way your forms look and | | | | line-height: 20px; |
| make a great deal of difference to your | | | | font-family: Tahoma, Verdana; } fieldset { |
| overall web site design. | | | | margin-bottom: 10px; border: none; } |
| | | | label { line-height: 1.8; vertical-align: |
| XHTML CODE | | | | top; float: left; text-align: right; |
| | | | margin-right: 1em; width: 120px; |
| Below is a basic form structure. I've used | | | | font-weight: bold; } fieldset ol, li { |
| ordered lists to segment the form and | | | | margin: 0px; padding: 5px; |
| | | | list-style: none; } fieldset fieldset { |
| 1. tags for each row of the form just as I | | | | border: none; margin: 3px 0 0; } fieldset |
| find this easily breaks up the code for use | | | | fieldset legend { padding: 0 0 5px; |
| by novice CSS users. | | | | color: #000000; } legend { padding: 0 |
| | | | 10px 0 10px; font-weight: bold; } |
| | | | fieldset fieldset label { font-weight: |
| | | | normal; width: 170px; margin-left: 123px; |
| 2. * Surname: | | | | text-align: left; } form em { |
| | | | font-style: normal; font-weight: bold; |
| 3. * Forename: | | | | color: #FF0000; } input.newfield { |
| | | | background: url(../images/newfield.gif) |
| 4. Company: | | | | repeat-x 0 100%; border: none; |
| | | | font-weight: bold; } textarea { float: |
| 5. * Post Code: | | | | left; background: none; border: 1px solid |
| | | | #999999; width: 100%; font-weight: bold; |
| 6. Gender * | | | | font-size: 1em; } .submitbutton { width: |
| Male | | | | 10em; height: 1.6em; font-weight: bold; |
| | | | color: #FFFFFF; background-color: #99ccff; |
| Female | | | | background-position: center; } |
| | | | |
| 7. Additional information | | | | Browser Compatibility |
| | | | |
| Additional Tags | | | | Currently this form has been tested and works |
| | | | in IE5.5, IE6.0 and IE7 and Firefox. |