Skip to page content or Skip to Accesskey List.

Work

Main Page Content

Form Labels

Rated 4.18 (Ratings: 20)

Want more?

 

Ron Thigpen

Member info

User since: 05 Mar 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

Example







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>

W3 Reference

W3 HTML 4.01 reference -- label element

The access keys for this page are: ALT (Control on a Mac) plus:

evolt.org Evolt.org is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.