The FIELDSET and LEGEND HTML tags are used to create blocks of elements within forms.
In .com we have already seen several articles for the . But we still had to see a couple of labels, which, while not essential for creating forms, can help us structure them, improving the user interface of our pages.
The FIELDSET and LEGEND attributes are used together and serve respectively to define and label logical groups of form elements. They don’t really affect the operation of the form, but they serve to group elements in different areas, so that the user’s data input is clarified. By forming several groups of elements, you can create a structure that is much easier for the user to assimilate, especially when dealing with forms that have many elements.
FIELDSET Label
The FIELDSET tag is used to group the elements. It is used with its respective closing tag and what it does is create a box that surrounds the form elements placed inside it.
For example, it could be used like this:
It will simply create a square that will group the two form elements contained within the FIELDSET. Can .
LEGEND label
LEGEND is used to name or label a group created with FIELDSET. Simply add a clarifying note about what type of information is being grouped in the box. Nor is it useful for anything in particular, except because it looks pretty and because it can be used to help the user and improve the interface and clarity of the forms.
The LEGEND tag is placed after the FIELDSET tag. It has its own closing tag. Between LEGEND and its closure we place the text with which we want to mark the box defined with FIELDSET.
The LEGEND tag can be given the align attribute to indicate the place where the legend should appear. For example, we could indicate align=”right” so that it would appear on the right, instead of the left, which is where it appears by default.
Now let’s look at a simple example of using the FIELDSET and LEGEND tags together.
The .
We will be able to check how three blocks appear in the form, produced by three FIELDSET tags, with several form fields included in each one. In addition, each of the FIELDSETs have a LEGEND inside that is used to name each of the three blocks with a legend.
label LABEL
Although it is not part of the objective of this article, we also want to name another label called LABEL that does have a special utility in the creation of forms, in addition to aesthetics. It is used to put text next to the form elements and for such text to be associated with the element itself. This text, which we will put with the LABEL tag, is associated with a specific element with the FOR attribute, placing the identifier of the field that is being associated as the value of the attribute.
As we can see, we have created a LABEL and we have placed in the FOR attribute the name of the form field that we are associating with that text. The result is that the text placed inside the LABEL is an interactive element, which we can click on and it would be as if we were clicking on the field itself associated with the LABEL.
Finally, we comment that these tags are reported in another .com article, with explanations written by another author, which could complement and expand this information. If you are interested, access the article.
Facebook Comments
Disqus