如果您在 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图片实时加载

    浏览大型网站,特别是图片比较多的图片,如大型的电商网站,你会发现处了第一屏外,往下滚动的时候图片才加载出来,没必要一开始加载就要把全部图片加载出来,这样子打开网面的速度得到了很好提高.以下是笔者目前所 ...

  2. java中setDate(Date date)方法和String与Date之间的转换

    经常在开发的过程中遇到这样的问题,从数据库中读出来的数据需要转换为对像或者java bean,此时经常使用到setDate(Date date);这样的方法.感觉这是个很简单而又难受的事情,在这里浪费 ...

  3. iPhone开发 数据持久化总结(终结篇)—5种数据持久化方法对比

    iPhone开发 数据持久化总结(终结篇)—5种数据持久化方法对比   iphoneiPhoneIPhoneIPHONEIphone数据持久化 对比总结 本篇对IOS中常用的5种数据持久化方法进行简单 ...

  4. iOS 容易引“起循环引用”的三种场景

    笔者在阅读中总结了一下,在iOS平台容易引起循环引用的四个场景: 一.parent-child相互持有.委托模式 [案例]:   @interface FTAppCenterMainViewContr ...

  5. Unity3d有关图形尺寸大小的注意事项

    主要参考了官方文档,然后根据个人的理解撰写该文.Unity3D支持的图形文件格式有 PSD, TIFF, JPG, TGA, PNG, GIF, BMP, IFF, PICT(但根据本人的亲手测试,U ...

  6. simulate windows postmessage or keydown

    2 ways: 1. under TForm:   if assigned(focused) then      Focused.keydown(key,keychar,[]); 2. using s ...

  7. VS2010安装与测试编译问题(fatal error LNK1123: failure during conversion to COFF: file invalid or corrupt)

    由于第三方库的各种原因,与编译冲突问题,公司又决定把整个项目都统一改用VS2010来编译.所以我把我开发机上的VS2008卸载了,又重新安装了VS2010.无奈出现了COFF格式转换问题.搜索了下.完 ...

  8. B树叶子节点split

    一.B-Tree索引的分裂 1. 创建测试表 SQL> create table split_tab (id number, name varchar2(100)); 表已创建. SQL> ...

  9. JS控制菜单样式切换

    $('#subtabs a').each(function (i, ele) { var href = $(ele).attr("href"); if (location.href ...

  10. STL中erase的小心使用

    先看如下一道改错题: #include<iostream> #include<vector> using namespace std; void print(vector< ...