当前位置: 代码网 > it编程>网页制作>Css > html label标签的使用教程

html label标签的使用教程

2024年05月18日 Css 我要评论
在dreamweaver8中,只要一加入表单或表单对象,文本框等等,就会在代码中加入一个<label></label>,一直没明白这个label是做什么的,今天正好看到了解释:

在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 事件。 

需要注意的地方:
1、标签不允许嵌套。 
2、此元素在internet explorer 4.0 及以上版本的 html 和脚本中可用。 
3、此元素是内嵌元素。 
4、此元素需要关闭标签。 

元素示例代码 
下面的例子使用了 label 元素和 accesskey 属性设置文本框的焦点。 
<label for="octrlid" accesskey="1"> 
<span style="text-decoration:underline;">名字</span>: <font color="#999999">按alt+1到文本框</font>
</label> 
<input type="text" name="txt1" value="阿会楠"  size="20" tabindex="1" id="octrlid">
演示:

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com