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.