Grouping with the fieldset tag
If you have a longer form, it can be very handy to group the different kinds of fields. To do this, you use the <fieldset> element. The name of the group is given by the first <legend> element, which is a child of the <fieldset> element. Once we are at it I want to introduce yet another element, the <label>. The label is used to add a caption to each piece of element you are collecting.
Now let’s have an example where we use these new elements;
<form> <fieldset> <legend>Contact Details</legend> <label for="name">Name:</label> <input id="name"><br /> <label for="telephone">Telephone:</label> <input id="telephone"><br /> <label for="user-email">Email:</label> <input id="user-email"> </fieldset> <fieldset> <legend>User info</legend> <label for="username">Username:</label> <input id="username"><br /> <label for="password">Password:</label> <input id="password"><br /> </fieldset> <input type="submit" value="Submit now" /> </form>
Why use the fieldset? Imagine you wanted to add something to this form, perhaps favorite foods. Then you would group the different kind of foods in a new fieldset and gives clarity to your form. I have also added the attribute id to input field. This defines this elements unique identifier and we use it when we are assigning labels. Using the for-attribute we connect the input field and the label.
We have already looked at some of the different types of input fields that you can use in your webform – the text field and the submit button.
A text field is generally 20 characters long, but if you need a larger text field this can be changed, of cause. All you have to do is use the size attribute;
<input type="text" size="35" maxlength="140">
As you can see, I added another attribute, the maxlength. This defines exactly how many characters the visitor maximum can type in any given field. I chose 140 characters so exemplify how you could use the maxlength to create Twitter-like messages in e.g. blog commentaries.