label标签的作用

更多时间：2015-1-11 类别：Web前端浏览量：1987

label标签的作用

label标签的作用

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

1、FOR属性

功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。
用法：<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">

2、ACCESSKEY属性

功能：表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。
用法：<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">
局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。

二、Label标签备注

1、要将 LABEL 绑定到其它的控件，请将 LABEL 元素的 FOR 属性设置为与该控件的 ID 相同。将 LABEL 绑定到控件的 NAME 属性毫无用处。

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

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

4、标签不允许嵌套。

三、Label标签实例

HTML 代码复制


1.    <input type="radio" name="demo" value="1"/>选项1
2.    <input type="radio" name="demo" value="2"/>选项2
3.    <input type="radio" name="demo" value="3"/>选项3
4.    <input type="radio" name="demo" value="4"/>选项4
5.    <input type="radio" name="demo" value="5"/>选项5

上述HTML，你一定要选到单选的圆圈上，才能把选项点上

假如我们把代码改成

HTML 代码复制


1.    <input type="radio" id="demo1" name="demo" value="1"/><label for="demo1">选项1</label>
2.    <input type="radio" id="demo2" name="demo" value="2"/><label for="demo2">选项2</label>
3.    <input type="radio" id="demo3" name="demo" value="3"/><label for="demo3">选项3</label>
4.    <input type="radio" id="demo4" name="demo" value="4"/><label for="demo4">选项4</label>
5.    <input type="radio" id="demo5" name="demo" value="5"/><label for="demo5">选项5</label>

或者

HTML 代码复制


1.    <label><input type="radio" name="demo" value="1"/>选项1</label>
2.    <label><input type="radio" name="demo" value="2"/>选项2</label>
3.    <label><input type="radio" name="demo" value="3"/>选项3</label>
4.    <label><input type="radio" name="demo" value="4"/>选项4</label>
5.    <label><input type="radio" name="demo" value="5"/>选项5</label>

当你点击文字的时候，对应的单选圆圈就勾上了

标签：label标签

上一篇：检查表单数据是否改变

下一篇：Css Reset的作用

您可能感兴趣

排行榜

1
label标签的作用

label标签的作用

label标签的作用

热门推荐

排行榜