Fieldsets allow you to group your form controls into logical sections. This makes a form easier to understand and interact with. They also allow you to use text prompts for multiple form controls effectively.
Grouping form controls
Grouping form controls into related fieldsets can make a form more usable, and it provides you with more design options. In the expample below you can see that field sets have been grouped into two logical groups.
Looking at the example HTML above notice that all of the input fields are nested inside the fieldset container. The first element is the <legend> element, use this to structure input into logical groups. In this case a table is used to align input fields. Unless you set the width of the fieldset it will span the entire available width of the browser. Use CSS to specify a width and other attributes for the fieldset.
Controlling fieldset width
The HTML examples above show the class selector being used to control the display of the the field sets class="field1" and class="field2" The style sheet example is below.
CLASS LAB FIELDSETS
WHY YOU DID IT
Open UNIT 4. In Notepad and Firefox open order.html
Observe the form controls.
Under the form tag enter the following highlighted text.