Use Fieldsets to Improve User Accessibility on Your Web Pages

In some cases, Web pages with forms have only a rudimentary logical organization of content, with at most a tab system to move from one input box to another. The design approach used may simply consist of adding boxes as the client or web designer thinks of them. Grouping related sections together makes for a cleaner page and can improve the user’s experience. A Fieldset approach, which Dreamweaver CS3 includes in the design tools, will accomplish this organization easily. It is not even necessary to lay out the individual input areas before creating the Fieldsets. Set up the Fieldset areas first, then either copy and paste the input boxes. Alternatively, set up the input fields first. Then select the ones you want, click and drag and add the Fieldset tag, which will automatically place the selected fields in the Fieldset area.

To see how this works, create a new HTML page in Dreamweaver or other Web design software. Create a form by clicking on “Insert,” “Form” and choosing “Form” from the pop up menu. Now place the cursor within the form—this is essential. Click “Insert” and “Form” again but then select “Fieldset” from the menu. This opens the Fieldset dialog box. In the “Legend” box, insert a descriptive name for the collection of input items. For this example, type “Contact Information.” If you decide to change the legend later, just edit it in the Document (Design) view. To see a more complex example, insert another Fieldset using the same process, but use “Computer Description” for the Legend. Once again, be certain the cursor is still within the form itself before inserting the additional Fieldset. Your form should look like the added image at this point.

If you preview this form in your browser, you will see how it looks to a user. At this point, the browser view shows the second Fieldset nested under the first, which you do not want. To correct this, click on the “Code” view tab. You will see the following code:

<form id="form1" name="form1" method="post" action="">

<fieldset>

<legend>Contact Information</legend>

<fieldset>

<legend>Computer Description</legend>

</fieldset>

</fieldset>

Delete the second “</Fieldset tag>” and then insert it at the end of the first Contact Information line so the code now appears as:

<form id="form1" name="form1" method="post" action="">

<fieldset>

<legend>Contact Information</legend></fieldset>

<fieldset>

<legend>Computer Description</legend>

</fieldset>

If you view the form now with a browser, the two Fieldsets will be in separate boxes but still within the form.

For a brief example, add two Textboxes to the Contact Information Fieldset and two Radio Buttons to the Computer Description. Start by placing the cursor on the line below the Contact Information legend in Design view. Click “Insert,” “Form” and select “Textfield.” Enter “Name” in the ID and Label boxes. Repeat this process and add an “Email” textfield in the same way. Move the cursor down after the Computer Description legend and repeat the above steps, this time adding two Radio Buttons with ID and Labels of “PC” and “MAC.” The result should now look like this image when previewed in a browser.

By using CSS styles for the Fieldset and input fields, you can create a more visually appealing look to the page. While the attached image here probably goes a bit overboard in formatting, it gives you some idea of what you can accomplish by tinkering with the CSS styles.

After the design is complete, the only thing left is to add Submit and Reset buttons.