Website resource guide, web development, label form elements

Good form design requires that forms be easy to understand and navigate. You don't just throw a bunch of input fields on a screen and expect the user to figure out what to do. Good forms have instructions, a natural order, and labels for the various elements. Until HTML 4.0 addressed the problem, element labeling within a form was a haphazard affair. You could place text near an element and hope the browser did the right thing, like this:

Name: Name: <INPUT TYPE="text">

This might work, but window sizes and fonts might cause a word wrap between your label and the text field. You could implement a table to provide a bit more control over the layout:

Beyond making your HTML positively unmaintainable, you also had to play tricks with the tables to get everything to line up just right. Even if struggled to place the text near the element in the right way, you still had no way to tell the browser that there was a connection between the text and the form element. This is important: In other user interfaces, clicking on the label is often the same as clicking on the element itself. For example, here is a set of radio buttons with labels:

In any other user interface, clicking on the text adjacent to the radio button elements would be the same as clicking on the element itself, selecting the desired choice. In HTML forms, you must click the element, usually a much smaller target than the accompanying text.

HTML 4.0 changes all of this with the <LABEL> element. This new element allows you to create a label and associate it with an element in your form. Like real user interfaces, if the user clicks on the label, mouse and/or keyboard focus is directed to the form element.

Creating implicit labels

The <LABEL> element can be used in two ways, creating both implicit and explicit labels. The implicit labels are a bit easier to use and understand, but do not offer as wide a range of features as explicit labels. We'll explore implicit labels.

With an implicit label, you place the label text and the associated element within the <LABEL> tag. The browser renders the contents as if they were part of the containing text flow, but makes an internal association between the text and the form element. Interacting with the text is like interacting with the associated element.

For example, the radio buttons in the above example were created with HTML like this:

  <INPUT TYPE="radio" NAME="shipping"> Next day air

To create the same element with an implicit label, just surround this content with a <LABEL> tag:

  <LABEL><INPUT TYPE="radio" NAME="shipping">

  Next day air</LABEL>

While the content will be presented to the user no differently, clicking on the "Next day air" label is just like clicking on the radio button itself.

Explicit labels

Implicit labels are easy to create, but are limited to situations where the label content is immediately adjacent to the associated element. They are also limited to defining one label for a element. If you want to create multiple labels for an element, or attach a label to an element elsewhere in your document, you need to use explicit labels.

<< BACK

Label Form Elements

Creating implicit labels

Explicit labels