Main Page Content
Form Labels
Rated 4.18 (Ratings: 20) (Add your rating)
Log in to add a comment
(5 comments so far)
Want more?
- More articles in IA/Usability
- More articles by keihin
Ron Thigpen
User since: March 05, 2001
Last login: March 05, 2001
Articles written: 1
Form element labels aid usability by allowing users to click label text to select radio and checkbox elements. They are implemented using the <label for="elementID"> tag, in conjuction with the ID attribute of the <input> tag. Adding a style selector for labels lets you change the cursor (and other style accessible presentation characteristics) to indicate the clickable labels. This works in IE5+, and Moz0.9+. Older, non-compliant browsers will simply ignore the tag, making it fully backwards compatible.
Example
Input 1 Label
Input 2 Label
Input 3 Label
Input 4 Label
Input 5 Label
Input 6 Label
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Form Label Example</title>
<style>
label {cursor: hand;}
</style>
</head>
<body>
<form action="formlabel.htm" method="post" name="theform" id="theform">
<label for="input1">Input 1 Label</label>
<input type="radio" name="input" id="input1"><br>
<label for="input2">Input 2 Label</label>
<input type="radio" name="input" id="input2"><br>
<label for="input3">Input 3 Label</label>
<input type="radio" name="input" id="input3"><br>
<br>
<label for="input4">Input 4 Label</label>
<input type="checkbox" name="check1" id="input4"><br>
<label for="input5">Input 5 Label</label>
<input type="checkbox" name="check2" id="input5"><br>
<label for="input6">Input 6 Label</label>
<input type="checkbox" name="check3" id="input6"><br>
</form>
</body>
</html>
