Website resource guide, web development,defining implicit,explicit form labels

Prior to HTML 4.0, labels were created by simply placing text near the desired form element. Applying tables, you can usually create labels that show up in the right spot, along with their accompanying form elements. The down side is that the browser had no idea of what you were trying to do, so users cannot interact with your labels like they would in other user interfaces.

HTML 4.0 adds the <LABEL> tag. This tag lets the browser know that a label is attached to an element, so that the browser can behave accordingly when the user clicks on / tabs to the label. The <LABEL> tag can be used in two ways implicitly and explicitly, to attach a label to an element.

To create an implicit label, you simply place an element and its label within a <LABEL> tag. The two are linked together by the browser and interact accordingly. Implicit labeling is easy, but it is limited to labels that are immediately adjacent to the associated element. It also prevents you from attaching more than one label to an element.

Explicit labels

Explicit labels correct all the limitations of implicit labels, but added a small price in the form: complexity. Implicit labels use the <LABEL> tag, but add the FOR attribute to indicate the associated element. This is best shown with a simple example:

  <LABEL FOR="name_field">Name: </LABEL>

This label will be associated with the form element whose ID attribute has the value name_field. Somewhere in the page containing the label, you need to create this input element:

  <INPUT TYPE="text" ID="name_field">

If you wanted, you could create any number of labels and add FOR="name_field" to all of them. The browser would associate all of them with this text field.

Keep in mind that this only creates an association between the label and the element. There is no layout manipulation or other changes in how the page is presented. The contents of the <LABEL> tag are displayed as part of the form and get no special treatment whatsoever.

The other rule with explicit labels is that the ID attribute is not the same as the NAME attribute. The former creates an ID that can be referenced by the FOR attribute of a <LABEL> tag (among other things); the latter creates a name that is associated with the value of the element when it is submitted to the server for processing. technically, you can use the same name for both the ID and NAME attributes of a single element, but you may find it safer to use different names. You might consider using one naming convention for your label associations, and another for your element submission names.

Using explicit labels

In most well-designed forms, the label text is not adjacent to the associated element. Explicit labels are the only way to make the association between the label and the element. Consider this snippet of a table used to create aligned labels with their fields similarly aligned in an adjacent column:

<TR>

  <TD>Name:</TD>

  <TD><INPUT TYPE="text" NAME="user_name"></TD>

</TR>

<TR>

  <TD>Address:</TD>

  <TD><INPUT TYPE="text" NAME="address"></TD>

</TR>

To associate the labels and the fields across the table cells, you use explicit labels like this:

<TR>
<TD><LABEL FOR="name_lbl">Name:</LABEL></TD>
<TD><INPUT TYPE="text" NAME="user_name" ID="name_lbl"></TD>
</TR>
<TR>
<TD><LABEL FOR="addr_lbl">Address:</LABEL></TD>
<TD><INPUT TYPE="text" NAME="address" ID="addr_lbl"></TD>
</TR>

Notice that we've used both ID and NAME attributes for our text fields.

* These tags will be ignored by older browsers, but will spring to life with 5.0 browsers.

<< BACK

Defining Implicit, Explicit Labels within a Form

Explicit labels

Using explicit labels