label
适用DTD：Strict Transitional Frameset 适用浏览器：All
释义
表单区域标签（form field label）
语法
<label 属性="属性值">~标签内容~</label>
<label 属性="属性值">~标签内容~</label>
说明
label元素用来为表单中的控件建立关联标签，即为表单控件创建文本签条。它是用于组织表单的非常有用、富有意义的元素。有的控件有相应标签，例如按钮有文字显示标签，但大多数控件没有标签，例如文本框、单选按钮、复选按钮等。一般情况下，单击单选框或复选框这些控件旁的文字时，这些控件是没有选中效果的，因为这些文字不属于控件的一部分。利用label元素建立关联标签后，单击这些控件旁的文字则控件会被选中，因为label元素把要说明的控件与该元素的文本签条包装在一起。此时，两个元素之间的联系隐含在上下文中
标签要与控件一对一地设置，就是说一个标签只能作用于一个控件（不过可以多个标签作用于一个控件）
label元素的标签内容要指派成控件的关联文字时，一般要设置for属性，属性值为要对应的控件的识别名称（id）。或者直接把该控件及其说明文字（标签）一起包含到label元素中，此时for属性不是必须的
label元素结束标签不可省略
属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| ① for | id引用值 | 对应控件的id识别名 |
| ② accesskey | 任一个文字 | 指定快捷访问键，Windows下为Alt键加上快捷访问键，Macintosh下为Command键加上此快捷访问键 |
③ 通用属性：id、class、title、style、dir、lang、xml:lang  |
||
| ④ 内在事件：onfocus、onblur |
||
nbsp;
示范
<label for="表单控件的ID">…</label>
范例
下面的例子显示了XHTML文件基础结构：
运行
打印
下面的例子显示了XHTML文件基础结构：
运行打印
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>元素label</title>
</head>
<body>
<form>
<font color="navy"><b>这个例子演示label元素的作用</b></font><br><br>
选择你喜欢的音乐：
<input type="checkbox" name="ch1" value="rock" checked>摇滚乐
<input type="checkbox" name="ch2" value="jazz">爵士乐
<input type="checkbox" name="ch3" value="pop">流行乐<br>
选择你居住的城市：
<input type="radio" name="rd1" value="pop" value="beijing" checked>北京
<input type="radio" name="rd1" value="pop" value="nanjing">南京
<input type="radio" name="rd1" value="pop" value="shanghai">上海<br><br>
<font size="2" color="red">以上必须点击单选按钮或复选框本身才能将它们选中</font><hr>
<input type="checkbox" name="ch4" value="rock" checked id="kj1"><label for="kj1">摇滚乐</label>
<input type="checkbox" name="ch5" value="jazz" id="kj2"><label for="kj2">爵士乐</label>
<input type="checkbox" name="ch6" value="pop" id="kj3"><label for="kj3">流行乐</label><br>
选择你居住的城市：
<label><input type="radio" name="rd2" value="pop" value="beijing">北京</label>
<label><input type="radio" name="rd2" value="pop" value="nanjing">南京</label>
<label><input type="radio" name="rd2" value="pop" value="shanghai">上海</label><br><br>
<font size="2" color="red">以上可以点击单选按钮（可能IE不支持）或复选框旁的文字就能将它们选中，相比之下更方便</font>
</form>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>元素label</title>
</head>
<body>
<form>
<font color="navy"><b>这个例子演示label元素的作用</b></font><br><br>
选择你喜欢的音乐：
<input type="checkbox" name="ch1" value="rock" checked>摇滚乐
<input type="checkbox" name="ch2" value="jazz">爵士乐
<input type="checkbox" name="ch3" value="pop">流行乐<br>
选择你居住的城市：
<input type="radio" name="rd1" value="pop" value="beijing" checked>北京
<input type="radio" name="rd1" value="pop" value="nanjing">南京
<input type="radio" name="rd1" value="pop" value="shanghai">上海<br><br>
<font size="2" color="red">以上必须点击单选按钮或复选框本身才能将它们选中</font><hr>
<input type="checkbox" name="ch4" value="rock" checked id="kj1"><label for="kj1">摇滚乐</label>
<input type="checkbox" name="ch5" value="jazz" id="kj2"><label for="kj2">爵士乐</label>
<input type="checkbox" name="ch6" value="pop" id="kj3"><label for="kj3">流行乐</label><br>
选择你居住的城市：
<label><input type="radio" name="rd2" value="pop" value="beijing">北京</label>
<label><input type="radio" name="rd2" value="pop" value="nanjing">南京</label>
<label><input type="radio" name="rd2" value="pop" value="shanghai">上海</label><br><br>
<font size="2" color="red">以上可以点击单选按钮（可能IE不支持）或复选框旁的文字就能将它们选中，相比之下更方便</font>
</form>
</body>
</html>
一般都显式地把表单空间和它的标签联系起来，即label使用for属性指向该控件的id，这种方式可以使多个标签作用于一个控件。也可以隐式地把表单空间和它的标签联系起来，此时label元素不需要for属性，只要把控件包含在label元素内，标签可以放在控件的前面或者后面，这种方式一个标签可能只作用于一个控件。注：似乎IE 6不支持第二种方式。