Sponsored Links

HTML FieldSet and Label Elements

HTML 4.0 adds two elements which can greatly improve the accessibility and usability of your forms: <LABEL> and <FIELDSET>. By themselves, these elements do not effect the input of information. Instead, both of these elements provide additional information and context to the input elements that can help the user understand and fill out a form.

Label Element

HTML forms had a big disadvantage prior to HTML 4.0. There was no way to associate content with an input control. For example, if you create a radio button, , there was no way to explicitly define what information was associated with the radio button.

To solve this problem a new element <LABEL> was introduced in HTML 4.0. This element allows you to define what contents go with what input control. Below are two examples of labels:

  <LABEL ACCESSKEY=U FOR=userName>User Name</LABEL> 
  <INPUT TYPE=text ID=userName>

  <LABEL ACCESSKEY=I FOR=information>Send More Information</LABEL>
  <INPUT TYPE=checkbox ID=information>

In the above examples, the label is associating contents with the input control. Try clicking on the actual label text for both text box and the check box. ^{Requires HTML 4 Support} Notice how the control receives the focus when you click on the label (and how the checkbox actually toggles between on and off).

The label is associated with the control using the FOR attribute. The FOR attribute references the ID of an input control on your page. Since the relationship is being defined by reference you can place your labels independently of the control. For example, you can build your form in a table where the labels are in the first column, and the controls are in the second column.

In addition to the FOR attribute, we specified an ACCESSKEY. The ACCESSKEY defines an association between the label and a keyboard shortcut. On windows, you can type ALT-U to jump to the User Name field, and ALT-I to jump to the information check box.

While the ACCESSKEY improves navigation, there is no default rendering to help the user determine what accesskey is associated with what label. To solve this, we recommend you use the <SPAN> element to wrap the actual character and then associate a style with it. Below we demonstrate how to make your accesskey underlined. You need to define both a style for the accesskey class, then you need to wrap the character with a SPAN element that has a class of accesskey:

  <STYLE TYPE="text/css">
    .accesskey {text-decoration: underline}
  </STYLE>

  <LABEL ACCESSKEY=A FOR=Address>
    <SPAN CLASS=accesskey>A</SPAN>ddress
  </LABEL>
  <INPUT TYPE=TEXTBOX ID=Address>

Labels are a feature we highly recommend you add to all your web pages that use forms. If a browser does not support the LABEL element, it will be ignored without any effect on the rendering of the document. For browsers that do support LABEL (currently only Internet Explorer 4.0 for Windows), those users will get an improved experience.

FieldSet Element

The FIELDSET element allows you to group related controls and labels. Grouping controls makes it easier for a user to determine their purpose while improving accessibility to the form. FIELDSETs also have an interesting rendering default as shown below: ^{Requires HTML 4 Support}

The FIELDSET element renders its LEGEND in the border. As with all elements, the border can be customized and turned off using CSS. The above fieldset was defined with the following HTML:

  <FIELDSET>
    <LEGEND>User Information</LEGEND>
    Name: <INPUT TYPE="text"><BR>
    E-Mail: <INPUT TYPE="text">
  </FIELDSET>

So far you have seen how to request information from the user. On the next page we finish the tour of HTML Forms with how you submit your user's inputted information back to the server with the FORM element.

HTML Form Element...