With CSS, or Cascading Style Sheets, there are many advantages over plain HTML. First there is the ability quickly align content or to move an object (whether text, images, or animation) to another place on the site. Second, is speed. CSS files are only downloaded once and all the tags that were used in the HTML are now called from the CSS file, making for faster loading times and more viewing pleasure. Third, the layout and position of items can be fixed across the entire site, something that was only previously available by using frames. This all comes together to help those who prefer to view only the real content of your website, not all the code that was woven into it, which is a great advantage for those with difficulty in vision. When all of this is combined together you have people going to your site and enjoying the experience more. Unfortunately CSS is not the total answer, although it is a very good start. Some software manufacturers are slow to adept to the changes and therefore do not comply to all of the standards for the modern web. I will not point fingers but those of you that know me can guess of whom I am speaking. I hope that I have opened your eyes more to the available options in web design.
Stylish and Accessible Forms using CSS
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 text field 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
The link below shows a basic form structure. I’ve used ordered lists (ol) to segment the form and (li) tags for each row of the form just as I find this easily breaks up the code for use by novice CSS users.
XHTML Code and example
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.
CSS Code
CSS Code and example
Browser Compatibility
Currently this form has been tested and works in IE5.5, IE6.0 and IE7 and Firefox.
