HTML Tutorial - Fieldsets
This tutorial aims to teach you how to make your web site forms look more organized, in the same way as many windows applications do - by using fieldsets, for example HERE is a form on a windows application - notice the form is split into 2 clear areas - customer details and property details, as shown by the square around them and the title above - wouldn’t it be great if we could do this with HTML on our web sites… well we can, by using 2 (relatively) little known tags - the
How it works
Well the
tag is basically a wrapper for form elements, and puts a border around them, whilst the tag is used to give the title that appears at the top (customer details and property details in my windows example above). The tags go in this order (I’m using the common username/password form as an example):
< form action=' action_of_form ' method=' post '>
The above code would generate the following:
Password:
The extra yard
As you can see, that looks quite nice, however it stretches the entire length of the container it is in - in this case my table cell, normally it would stretch 100% of the page width, which we don’t want. Luckily for us, css (cascading style sheets) allow us to change that, by using the style property, as shown below:
< form action=' action_of_form ' method=' post '>
User Login Username:
Password:
Conclusion
You can now better organise your forms, and make your website stand out that little bit more!
