This template and tutorial is a great foundation for a CSS form and is totally flexible. Thsi can adapted by a range of CSS developers from beginners to advanced.
The majority of sites designed these days have at least one
form. If you’re a web designer then you’ll know that creating a template is
essential if you are to be efficient in your work.
Many times I’ve compromised on a form’s design due to time
restrictions. Below is a template that I use and that is quite flexible in its
design. This form allows for any type of input field from a simple textfield to
a group of radio buttons. If your quite comfortable with CSS then please feel
free to adapt this code.
The fun you can have with this form can really change the
way your forms look and make a great deal of difference to your overall web
site design.
XHTML CODE
Below is a basic form structure.
I’ve used ordered lists
to segment the form and
tags for each row of the form just as I find this easily breaks up
the code for use by novice CSS users.
*
Surname:
*
Forename:
Company:
* Post Code:
Gender *
Male
Female
Additional
information
Additional Tags
If you look through the code you will see some tags which
you may deem as unnecessary (i.e tags after the radio button).
These are to enable a cross browser compatible layout. Within the CSS code you
will notice at the beginning that all the margins and padding are set to zero.
Alternatively you could place the form in a div with zero margins and padding
but it is entirely up to you.
