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