如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

有两种使用方法:

方法1  使用for属性

<label for="userName">用户名:</label><input type="text" id="userName"/>  

方法2

<label>用户名:<input type="text"/></label> 

在使用单选按钮radio或者多选按钮checkbox的时候,有时需要在选中文字的时候就要选中单选或者多选按钮,这同样可以使用类似上面的方法。

方法1

<label><input type="radio" />用户名</label>
<label><input type="checkbox">学校</label>

方法2  使用for属性

<label for="userName">用户名</label> <input type="radio" id="userName" />

<label for="userName">用户名</label> <input type="checkbox" id="userName" />

html label 标签的 for 属性的更多相关文章

  1. HTML<label> 标签的 for 属性

    定义和用法 for 属性规定 label 与哪个表单元素绑定. 隐式和显式的联系 标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 <l ...

  2. HTML label标签的for属性--input标签的accesskey属性

    本次示例是在firefox演示(如果其他浏览器对accesskey操作不成功的,请参考文章最后各浏览器下的快捷键)label的for属性是和input的id绑定,当我们点击input前面的文本标识会自 ...

  3. <label>标签for属性的妙用

    在用户注册的时候,常常用户点击文字就需要将光标聚焦到对应的表单上面,这个是怎么实现的呢?就是下面我要介绍的<label>标签的for属性 定义:for 属性规定 label 与哪个表单元素 ...

  4. <label>标签for属性

    label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本,就会触发此控件.就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控 ...

  5. HTML <label> 标签

    定义:<label> 标签为 input 元素定义标注(标记). 用法: label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本, ...

  6. 转:label标签的特殊用法

    容易被忽略的label标签 原始作用 label标签是HTML原生的标签,其原始的作用参考这里 label 标签为 input 元素定义标注(标记). label 元素不会向用户呈现任何特殊效果.不过 ...

  7. a标签中的label在IE下触发不了a标签的href链接(label标签——解析)

    <a href="http://www.baidu.com/" target="_blank"> <span>百度</span&g ...

  8. label 标签

    <label> 标签为 input 元素定义标注内容 label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本,就会触发此控件.就是 ...

  9. 容易被忽略的label标签

    # 容易被忽略的label标签 ## 原始作用 `label`标签是HTML原生的标签,其原始的作用参考[这里](http://www.w3school.com.cn/tags/tag_label.a ...

随机推荐

  1. C++ Primer 5th 第5章 语句

    和大多数语言一样,C++提供了条件执行语句.重复执行相同代码的循环语句和由于中断当前控制流的跳转语句,表达式语句和声明语句等. 语句有简单语句和复合语句之分.简单语句但多数以分号结束,最简单的语句就是 ...

  2. 校门外的树 - Grids2808

    校门外的树 问题描述: 某校大门外长度为 L 的马路上有一排树,每两棵相邻的树之间的间隔都是1 米.我们 可以把马路看成一个数轴,马路的一端在数轴0 的位置,另一端在L 的位置:数轴上的每 个整数点, ...

  3. 文成小盆友python-num3 集合,函数,-- 部分内置函数

    本接主要内容: set -- 集合数据类型 函数 自定义函数 部分内置函数 一.set 集合数据类型 set集合,是一个无序且不重复的元素集合 集合基本特性 无序 不重复 创建集合 #!/bin/en ...

  4. WebApi上传图片 await关键字

    await关键字对于方法执行的影响 将上一篇WebApi上传图片中代码修改(使用了await关键字)如下: [HttpPost] public async Task<string> Pos ...

  5. vuex构建笔记本应用学习

    vuex:针对vue应用派生的专门管理应用state的工具,state可以理解为我们组件需要操作的data数据,都知道,vue构建spa应用的时候,随着组件规模的提升,各个子组件之间的通信如果采用子组 ...

  6. Sublime Text 2 注册码

    ----- BEGIN LICENSE ----- Andrew Weber Single User License EA7E- 813A03DD 5E4AD9E6 6C0EEB94 BC99798F ...

  7. LINUX小技巧,如何在指定目录下搜索到含特定关键字的文件。

    先找出文件,然后将文件作为输入,找具体关键字 find /etc -name "*" | xargs grep "Hello"

  8. cp 提示 overwrite 问题

    cp 提示 overwrite 问题 copy -f 文件的时候仍然提示覆盖问题,很诧异,咨询SA,果然 cp -i 强制要求覆盖文件的时候确认,-f 也不起作用,大大的不爽[root@erpappd ...

  9. QQ地图api里的 地址解析函数 看不懂 javascript_百度知道

    QQ地图api里的 地址解析函数 看不懂 javascript_百度知道     QQ地图api里的 地址解析函数 看不懂 javascript    2011-09-18 12:18     匿名 ...

  10. swift 随机数

    1.一行代码生成随机数  arc4random() 如果要生成一个生成在一定范围内的随机整数: func randomIn(#min: Int, max: Int) -> Int { retur ...