label标签的用途(本文转自http://blog.sina.com.cn/s/blog_6cbbde3f0100o7a9.html)

在Dreamweaver8中,只要一加入表单或表单对象,文本框等等,就会在代码中加入一个<label></label>,一直没明白这个label是做什么的,今天正好看到了解释:
Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。
FOR属性    功能:表示Label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点。    用法:<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">
ACCESSKEY属性:    功能:表示访问Label标签所绑定的元素的热键,当您按下热键,所绑定的元素将获取焦点。    用法:<Label FOR="InputBox" ACCESSKEY="N">姓名</Label><input ID="InputBox" type="text">
局限性:accessKey属性所设置的快捷键不能与浏览器的快捷键冲突,否则将优先激活浏览器的快捷键。
注释 要将 LABEL 绑定到其它的控件,请将 LABEL 元素的 FOR 属性设置为与该控件的 ID 相同。将 LABEL 绑定到控件的 NAME 属性毫无用处。但是,要提交表单,你必须为 LABEL 元素所绑定到的控件指定 NAME。
有两种方法给所指定的快捷键添加下划线。LABEL 元素的 rich text 支持可以在 ACCESSKEY 属性所指定的快捷键字符两侧加上 U 元素。如果你更愿意使用样式表(CSS)来应用样式,可以将该字符包含在 SPAN 中,并设置样式为“text-decoration: underline”。
如果用户单击 LABEL,则会先触发 LABEL 上的 onclick 事件,然后触发由 htmlFor 属性所指定的控件上的 onclick 事件。按下 LABEL 设定的快捷键将设置焦点但并不触发 onclick 事件。
标签不允许嵌套。
此元素在 Internet Explorer 4.0 及以上版本的 HTML 和脚本中可用。
此元素是内嵌元素。
此元素需要关闭标签。
元素示例代码 下面的例子使用了 LABEL 元素。

1.<form method=post action=''>  
2.    <div class="int">  
3.        <label for="personal">UserName</label>  
4.        <input type="text" id="username" class="required"/>  
5.    </div>               
6.    <div class="int">  
7.        <label for="email">Email</label>  
8.        <input type="text" id="email" class="required"/>  
9.    </div>  
10.    <div class="int">  
11.        <label for="personal">Personal Info</label>  
12.        <input type="text" id="personal" class="requried"/>  
13.    </div>  
14.    <div class="sub">    
15.        <input type="submit" value="submit" id="send"/><input type="reset" value="reset"/>  
16.    </div>  
17.</form>  

 

 
posted @ 2014-02-24 20:08  追逐之旅  阅读(202)  评论(0编辑  收藏  举报