HTML PRIMER

by Jim Gordley
2008-2016

Fieldsets

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.



Personal Information
First Name:
Email




Personal Information
First Name:
Email:
Send me information on:
Recipies Promotions Email List Free Samples

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.

.field1 {width:300px;}

.field2 {width:475px;}

CLASS LAB
FIELDSETS
DO THISWHY YOU DID IT
  1. Open UNIT 4. In Notepad and Firefox open order.html

    Observe the form controls.





  2. Under the form tag enter the following highlighted text.

    <form method="POST" action="YourFormProcessor">
    <fieldset>
    <legend>Account Information</legend>


    Between the closing table tag and the line break tag close the field set by entering the following highlighted text.

    <td>Email: <br><input type="text" name="email"></td>
    </tr>
    </table>

    </fieldset>
    <br>

  3. Save the changes and refresh the browser to verify your work.







  4. In the Notepad order.html file Within the style tag add the following highlighted text.

    fieldset {width:420px;}

    Save the changes and refresh the browser to verify your work.

  5. Create a second fieldset for the remaining input fields

    Use the text "Payment Information" as the legend.

    Save the changes and refresh the browser to verify your work.

To edit and visulize the order.html file in Notepad and Firefox.

Notice that there are input fields for personal information and other input fields for credit card information.



To edit the order.html file to include a fieldset.


















Account Information
First Name:
Last Name:
Password:
Email:
The fieldset has placed a border around the related input fields. At the top the legend text appears.



Your form should look like the for in the example below
Adding Style to your forms