Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

Labelling fields

To add labels to fields in a form is a bit hit-and-miss. You could just do:

Name: <input type="text">

And hope the browser made a reasonable job of it. If you put the text in a table, you get a bit more control over layout.

However, you had no way to tell the browser that the text and the form element had a connection. The <label> tag in HTML 4.0 allows you to connect the labels to the form element (for example a radio button). This means that if you click the label, it is the same as clicking the element itself. For example:

<label><input type="radio" name="os">Windows</label>

In theory, clicking on the word "Windows" is the same as clicking on the radio button. I'm not sure it works in all browsers.

If you want to get clever, you can use the for attribute with the <label> tag. This allows you keep the labels and the form elements apart; you do not need to have the labels immediately next to the element. You can also set up more than one label for an element.

You can enter your label information:

<label for="os">Windows:</label>

The browser associates this label with the form element with an id of "os" which you create some where in the form.

<input type="radio" id="os">

You probably need IE 5 for this to work.