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