如果您在 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. .net转php laraval框架学习系列(三)项目实战---Route&Controllers

    本章来学习laravel的路由 一个简单的路由列子 Route::get('/', function() { return 'Hello World'; }); 路由的写法和Node的风格很相似.上面 ...

  2. C#实现窗体间的通信

    以下将窗体间的几种通信实现方式做一下罗列:首先新建一个窗体Form1,在其中放置一个Textbox.Button控件.再新建一个窗体Form2,其上放置一个Button控件.具体代码示例如下: //F ...

  3. ulimit -t 引起的kill血案

    http://my.oschina.net/leejun2005/blog/80975 http://www.cnblogs.com/hazir/p/systemtap_introduction.ht ...

  4. cf E. Dima and Magic Guitar

    http://codeforces.com/contest/366/problem/E |x1-x2|+|y1-y2|有四种情况 1.-(x1-x2)+(y1-y2); 2.(x1-x2)-(y1-y ...

  5. CCI_chapter 19 Moderate

    19 1  Write a function to swap a number in place without temporary variables void swap(int &a, i ...

  6. Cross-compiling Qt Embedded 5.5 for Raspberry Pi 2

    This tutorial shows how to cross-compile the Embedded build of Qt 5.5 for Raspberry Pi 2. The Embedd ...

  7. C# .Net 多进程同步 通信 共享内存 内存映射文件 Memory Mapped 转

    原文:C# .Net 多进程同步 通信 共享内存 内存映射文件 Memory Mapped 转 节点通信存在两种模型:共享内存(Shared memory)和消息传递(Messages passing ...

  8. Cmake的install与file命令的区别

    实际上他们两个可以达到一个目标(对于文件操作),但是又有本质上的区别,文档没有细看,但是一般利于项目的管理,使用install,install命令如果在cmake命令中没有指名install参数,实际 ...

  9. Spring中Bean的命名问题及ref和idref之间的区别

    一直在用Spring,其实对其了解甚少,刚去了解了一下Spring中Bean的命名问题以及ref和idref之间的区别,略作记录,以备后查. Spring中Bean的命名 1.每个Bean可以有一个i ...

  10. BZOJ1108: [POI2007]天然气管道Gaz

    1108: [POI2007]天然气管道Gaz Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 410  Solved: 211[Submit][Sta ...