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

label标签常用于与checkbox或radio关联,以实现点击文字也能选中/取消checkbox或radio。

label标签的关联方式主要有两种,显示关联隐式关联

显示关联:

显式关联是通过label标签的for属性,显式与另一个表单控件关联。需要注意的是,for属性的值必须是与label标签在同一文档中的可标记表单元素的id,注意是id而不是name。如:

<input type="checkbox"  id="test"/>
<label for="test">选项</label>

隐式关联:

隐式关联是直接将表单控件放到label标签内,这种情况下,label标签只能包含一个表单元素,包含多个只对第一个有效。如下:

<label>请选择:<input type="checkbox"></label>

HMTL label标签的更多相关文章

  1. WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

    一.前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要是对文本 ...

  2. HTML label标签的一点理解

    label标签为input元素定义标注. label元素不呈现任何特殊效果.不过他为鼠标用户改进了可用性.如果你在label元素内点击文本就会触发此控件.就是说当用户选择该标签是,浏览器就会自动的将焦 ...

  3. HTML <label> 标签

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

  4. label标签使用过程中遇到的问题

    最近在做东西时候使用到了label标签,由于之前很少使用label标签,所以就遇到一个很奇怪的问题.什么问题呢?下面来看一个效果 <!DOCTYPE html> <html> ...

  5. [Cocos2D-x For WP8]Label标签

    Label标签主要会用于在游戏中显示一些文字字符串类型的信息.那么在Cocos2D-x里面主要会有下面的一些创建标签的方式: 1.使用CCLabelTTF类生成系统文字的标签,编程语法如下: CCLa ...

  6. [HTML5]label标签使用以及建议

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

  7. label标签跳出循环

    出场: 首先我们来说说为什么需要label标签,虽然我们已经知道有break,continue跳出循环,但如果是多重循环那么它们就显的无能为力了,所以就出现了label这个标签来为我们服务. 我们先来 ...

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

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

  9. html之label标签

    label标签为input元素定义标注,label标签与相关元素通过id属性绑定在一起. 相关属性: for:规定label绑定到哪个表单元素 form:规定label字段所属的一个或多个表单 示例代 ...

随机推荐

  1. 前端视频插件Aliplayer播放器简单使用(基于地址播放)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. gradle第一篇:初入门

    有的时候,感觉技术真是一年一个样,之前呢ant式微,被maven取代,而现在呢,maven慢慢式微,又渐渐要被gradle取代,不说多了我们现在就来讲一讲gradle吧. 第一步——安装: ①安装所需 ...

  3. easy-mock本地部署成功,访问报错:EADDRNOTAVAIL 0.0.0.0:7300 解决方案

    easy-mock本地部署成功后,迫不及待的想看看是否能正常访问,执行命令 npm run dev 启动项目,访问 127.0.0.1:7300 ,结果郁闷的是报错:EADDRNOTAVAIL 0.0 ...

  4. LINQ to Entities does not recognize the method , and this method cannot be translated into a store expression 解决办法

    根据用户输入的起始日期,查询以起始日期开始的前20条记录,在ASP.NET MVC的Controller代码中这样写: var Logs = db.Log.Take(20); if (!string. ...

  5. Ubuntu16.04 下如何安装搜狗拼音输入法【亲测有效】

    Ubuntu16.04 下如何安装搜狗拼音输入法[亲测有效]   一.添加fcitx键盘输入法系统[系统默认是iBus] 1.将下载源添加至系统源: sudo add-apt-repository p ...

  6. ele

    vue饿了么app项目实战视频 5-1 1.项目代码规范修改.

  7. 全网最详细的Git学习系列之介绍各个Git图形客户端(Windows、Linux、Mac系统皆适用ing)(图文详解)

    不多说,直接上干货! 一.TortoiseGit - The coolest Interface to Git Version Control TortoiseGit 是 TortoiseSVN 的  ...

  8. 十分有趣的this指向题

    var num=5;//9 =>++this.num=>10 var obj={ num:3, fn:function() { num = 9;//window.num=9 (functi ...

  9. springboot-2-ioc

    在spring环境下, ioc(控制反转 和 DI (依赖注入) 是等效的, 主要体现一种组合的松耦合思想. spring Ioc容器负责创建Bean, 并将Bean注入到所需的Bean中, 有xml ...

  10. 利用OC对象的消息重定向forwardingTargetForSelector方法构建高扩展性的滤镜功能

    在OC中,当像一个对象发送消息,而对象找到消息后,从它的类方法列表,父类方法列表,一直找到根类方法列表都没有找到与这个选择子对应的函数指针.那么这个对象就会触发消息转发机制. OC对象的继承链和isa ...