The HTML FIELDSET tag is used to group form fields together. As an example, if you have a series of checkboxes or radio buttons that all share the same label, you can use the LEGEND tag to associate one text label with all of the fields. See Example 1 below.

Another example of use is when you have several form fields on the page with the same label. If you have a shopping cart on which there is both a shipping address and a billing address both have first name, last name, street address, city, state, etc. In this case a LEGEND is read along with each form fields label. See Example 2 below.

Example 1:

Eye Color

<fieldset id="eyeColor">
<legend>Eye Color</legend>
<li><input type="radio" name="eye_color" id="blueEyes"/> <label for="blueEyes">Blue</label> </li>
<li><input type="radio" name="eye_color" id="brownEyes"/> <label for="brownEyes">Brown</label></li>
<li><input type="radio" name="eye_color" id="greenEyes"/> <label for="greenEyes">Green</label></li>
<li><input type="radio" name="eye_color" id="otherEyes"/> <label for="otherEyes">Other</label></li>
</fieldset><div id="code" class="code">

Example 2:

Shipping Address

Billing Address

<fieldset id="shipping">
<legend>Shipping Address</legend>    
<label for="fName1">First Name:</label> <input type="text" name="first_name" id="fName1"/>
<label for="lName1">Last Name:</label> <input type="text" name="last_name" id="lName1"/>
<fieldset id="billing">
<legend>Billing Address</legend>    
<label for="fName2">First Name:</label> <input type="text" name="first_name" id="fName2"/>
<label for="lName2">Last Name:</label> <input type="text" name="last_name" id="lName2"/>

Works With

Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes


Comments are closed.