如果您在 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. 出现并解决Navicat 报错:1130-host ... is not allowed to connect to this MySql server,MySQL

    例如,你想myuser使用mypassword从任何主机连接到mysql服务器的话. GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%' IDENTIFIED BY ...

  2. 利用redis协助mysql数据库搬迁

    最近公司新项目上线,需要数据库搬迁,但新版本和老版本数据库差距比较大,关系也比较复杂.如果用传统办法,需要撰写很多mysql脚本,工程量虽然不大,但对于没有dba的公司来说,稍微有点难度.本人就勉为其 ...

  3. C语言初学 判断闰年的问题

    #include<stdio.h> main( ) {  int   year , leap; scanf("%d",&year);             i ...

  4. 关于Linux平台malloc的写时拷贝(延迟分配)【转】

    Linux内核定义了“零页面”(内容全为0的一个物理页,且物理地址固定),应用层的内存分配请求,如栈扩展.堆分配.静态分配等,分配线性地址后,就将页表项条目指向“零页面”(指定初始值的情况除外),这样 ...

  5. 理解java的三大特性之多态(三)

    摘自:http://cmsblogs.com/?p=52 面向对象编程有三大特性:封装.继承.多态. 封装隐藏了类的内部实现机制,可以在不影响使用的情况下改变类的内部结构,同时也保护了数据.对外界而已 ...

  6. Chrome下的语音控制框架MyVoix.js使用篇(一)

    日前因工作需求,着手研究了语音识别技术,发现github上有网友发布了一款叫做voix.js的javascript框架.在拜读voix.js的源码后发现了不少问题,于是自己写了一款语音识别框架MyVo ...

  7. HTTP缓存机制梳理

    一般只对GET类型请求做缓存,对POST不做缓存 缓存协商 指浏览器和Web服务器之间对于是否使用浏览器端缓存的协商.对于较小的文件内容,由于缓存协商仍需要发送请求,所以吞吐率提高不大:但没有正文传输 ...

  8. SaltStack运行任务卡住了,怎么办?

    将相关的JOB ID杀死即可. salt-run jobs.active salt "*" saltutil.signal_job JOBID 15

  9. 如何在Protel99se中批量修改元件的封装

    有时候需要批量修改元件的封装,可在原理图和PCB中批量修改.本文以批量修改电阻AXIAL0.3 的封装为AXIAL0.4 为例. 1. 在原理图中批量修改1.1. 方法1双击需要修改封装的其中一个元件 ...

  10. 在WPF中使用AForge.net控制摄像头拍照

    原文:在WPF中使用AForge.net控制摄像头拍照 利用AForge.net控制摄像头拍照最方便的方法就是利用PictureBox显示摄像头画面,但在WPF中不能直接使用PictureBox.必须 ...