html label标签的使用教程_ Div+Css教程-查字典教程网
html label标签的使用教程
html label标签的使用教程
发布时间:2016-12-29 来源:查字典编辑
摘要:在Dreamweaver8中,只要一加入表单或表单对象,文本框等等,就会在代码中加入一个,一直没明白这个label是做什么的,今天正好看到了...

在Dreamweaver8中,只要一加入表单或表单对象,文本框等等,就会在代码中加入一个<label></label>,一直没明白这个label是做什么的,今天正好看到了解释:

Label中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。

FOR属性

功能:表示Label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点。

用法:<LabelFOR="InputBox">姓名</Label><inputID="InputBox"type="text">

ACCESSKEY属性:

功能:表示访问Label标签所绑定的元素的热键,当您按下热键,所绑定的元素将获取焦点。

用法:<LabelFOR="InputBox"ACCESSKEY="N">姓名</Label><inputID="InputBox"type="text">

局限性:accessKey属性所设置的快捷键不能与浏览器的快捷键冲突,否则将优先激活浏览器的快捷键。

注释

要将LABEL绑定到其它的控件,请将LABEL元素的FOR属性设置为与该控件的ID相同。将LABEL绑定到控件的NAME属性毫无用处。但是,要提交表单,你必须为LABEL元素所绑定到的控件指定NAME。

有两种方法给所指定的快捷键添加下划线。LABEL元素的richtext支持可以在ACCESSKEY属性所指定的快捷键字符两侧加上U元素。如果你更愿意使用样式表(CSS)来应用样式,可以将该字符包含在SPAN中,并设置样式为“text-decoration:underline”。

如果用户单击LABEL,则会先触发LABEL上的onclick事件,然后触发由htmlFor属性所指定的控件上的onclick事件。按下LABEL设定的快捷键将设置焦点但并不触发onclick事件。

需要注意的地方:

1、标签不允许嵌套。

2、此元素在InternetExplorer4.0及以上版本的HTML和脚本中可用。

3、此元素是内嵌元素。

4、此元素需要关闭标签。

元素示例代码

下面的例子使用了LABEL元素和ACCESSKEY属性设置文本框的焦点。

<LABELFOR="oCtrlID"ACCESSKEY="1">

<SPAN>名字</SPAN>:<fontcolor="#999999">按ALT+1到文本框</font>

</LABEL>

<INPUTTYPE="text"NAME="TXT1"VALUE="阿会楠"SIZE="20"TABINDEX="1"ID="oCtrlID">

演示:

html label作用 名字: 按ALT+1到文本框

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类