TOC

The community is working on translating this tutorial into Spanish, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".

Forms:

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.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!