如果您在 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. js formatString 格式化字符串

    /* 函数:格式化字符串 参数:str:字符串模板: data:数据 调用方式:formatString("api/values/{id}/{name}",{id:101,name ...

  2. web标准(复习)--5 超链接伪类

    今天我们开始学习超链接伪类,包含以下内容和知识点: 链接的四种样式 将链接转换为块状 用css制作按钮 首字下沉 一.超链接的四种样式 超链接可以说是网页发展史上一个伟大的发明,它使得许多页面相互链接 ...

  3. Linux修改时间时区并在Tomcat中生效

    Linux查看当前时间时区linux:~ # datelinux:~ # date –Rlinux:~ # zdump -v /usr/share/zoneinfo/Asia/Beijing ---- ...

  4. python 各模块

    01 关于本书 02 代码约定 03 关于例子 04 如何联系我们 1 核心模块 11 介绍 111 内建函数和异常 112 操作系统接口模块 113 类型支持模块 114 正则表达式 115 语言支 ...

  5. soapUI通过groovy脚本设置超时时间

    import com.eviware.soapui.SoapUI import com.eviware.soapui.settings.HttpSettings import com.eviware. ...

  6. autorelease(转)

    autorelease(转) (2013-02-05 18:27:43) 转载▼     总觉得autorelease这里掌握的不到位,但涉及到内存管理,实在不可小视.今天参考了网上的不少文章和官方A ...

  7. MYSQL错误解决:ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)

    ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' ( ...

  8. 学EE做硬件找工作不如学CS做软件,为什么会这样?

    学EE做硬件找工作不如学CS做软件,为什么会这样? 电子工程(EE)就业最好的方向居然是转计算机,也许让有的人觉得很不公平,EE也是很重要的学科,我们学习也很努力,为什么就业会不如CS?也有的人好奇, ...

  9. msg="No symbol table is loaded. Use the \"file\" command."

    用Eclipse调试的时候,下断点的unresolved breakpoint,报的是标题上的错误.原因显然是没有加载符号表,需要用gdb的file命令加载符号表. (gdb) file [exec_ ...

  10. 转:Android 测试 Appium、Robotium、monkey等框架或者工具对比

    原文地址:http://demo.netfoucs.com/u012565107/article/details/36419297# 1. Appium测试 (功能测试,用户接受度测试,黑盒测试) - ...