Oct232005Dreamweaver 8 Review
Check out my Dreamweaver 8 review at Macworld.com.
Archive for October, 2005
Oct122005The versatile <label> tag
The <label> tag is a useful addition to your web-form toolkit. It’s intended to provide a text label for a form element—for example, “First Name” next to a text field used to collect a visitor’s name. The <label> tag associates the text with a form field, thus providing a clear description of the field’s purpose. This makes the form more accessible as well.
But as an added benefit, many Web browsers treat the <label> tag as an extension of the clickable area for checkboxes and radio buttons. In other words, you can click the label to select a radio button or checkbox. See for yourself:
(Sorry Safari users, this neat feature hasn’t been added to that browser, yet. Try it in Firefox.)
In addition, other types of fields are given “focus” when their labels are clicked. For example, clicking a label for a text field, places the cursor into the text field—just as if you’d clicked in the field itself. Try it here:
Best of all adding labels, is a piece of cake. Dreamweaver 8, for example, can help with the process (you just need to make sure the “Form Objects” box is checked in the “Accessibility” category of the Preferences window.)
Adding the code by hand isn’t any trouble either. You can either wrap a <label> around a form element like this:
<label>Name:
<input type="text" name="textfield" />
</label>
Unfortunately, only Firefox reliably treats the label text as clickable using this method. A better approach is to use the <label> tag’s “for” attribute to associate the label with the form field. For this to work, you need to add an ID attribute to the form field, and then use that ID as the value of the label tag’s “for” attribute like this:
<input name="opt-in" id="optBox" type="checkbox" value="check" />
<label for="optBox">This whole label is clickable!</label>
