We’ve all seen forms of varying types littering the internet. My approach always used to be to get the table tags out and enclose my form in a table of varying complexity depending on how I wanted to make the form look. Then came the eureka moment that the resulting form is buried in a lot table, tr, td, th, tags. That’s when the search continued for a new method.
A simpler form can be created using fieldset tags. Within the fieldset tags we can make use of the legend tag to put a title on the form. This is more useful when there is a few sections to a form to group individual fields onto sections. Then to group the headings for the field the <label for> tag is used. This then helps when styling the form as the label can be aligned to the left and a two column form can be easily created.
<form id="form1"> <fieldset> <legend>This legend makes a neat heading</legend> <label for="text1">Field 1</label> <input id="text1" type="text" /> <input name="submit" type="submit" /> </fieldset> </form>
This code gives the form below without css.
The form contains no markup to make the form sexy but as we’ve given the elements id names we can use CSS to alter the formatting of the form as we wish. This includes setting the form up with columns, altering the fonts, colours and anything else we wish to add.
To add extra extra help to the form validation can be used to give help, issue alerts to ensure that forms are filled in properly. The following jquery validation plugin was used available from http://bassistance.de/jquery-plugins/jquery-plugin-validation/. If running on a live website to ensure that the data is validated some server based validation should be used by using php or another server-side language.
The validation plugin has many options to customise the validation and the resulting errors / warnings. The full documentation is available at http://docs.jquery.com/Plugins/Validation.
Bannish boring forms forever
Next time you create a form don’t forget they don’t have to be boring