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