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".
If you are fluent in Spanish, then please help us - just point to any untranslated element inside the article and click the translation button to get started. Or have a look at the current translation status for the Spanish language.
If you see a translation that you think looks wrong, then please consult the original article to make sure and then use the vote button to let us know about it.
Please help us by translating the following metadata for the article/chapter, if they are not already translated.
If you are not satisfied with the translation of a specific metadata item, you may vote it down - when it reaches a certain negative threshold, it will be removed. Please only submit an altered translation of a metadata item if you have good reasons to do so!
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.