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. collections 模块常用方法学习

    前情提要: 1:模块介绍 个人认为就是 python自带的骚操作模块.如果基础能力够给力的话,完全用不到 个人认为解析式才是装逼神奇,用模块的都是伪娘 2:deque   双向列表 from coll ...

  2. STM32-增量式旋转编码器测量

    Development kit:MDK5.14 IDE:UV4 MCU:STM32F103C8T6 一.增量式旋转编码器 1.简介 编码器(encoder)是将信号(如比特流)或数据进行编制.转换为可 ...

  3. 性能测试 vs 负载测试 vs 压力测试

    在做一些软件测试工作时,常常会被提及性能测试.负载测试.压力测试,这也是在软件测试方面最容易混淆的三个概念.之前和一个测试大牛聊天,他和我说常常面试一些测试人员会问一些这样的问题,大多人认为负载测试等 ...

  4. pycharm连接数据库出现时区jdbc问题

    unrecognized or represents more than one time zone. You must configure either the server or JDBC dri ...

  5. 题解 p2420 让我们异或吧

    传送门 #include<iostream> #include<cstdio> #include<cstring> using namespace std; ;in ...

  6. hiho# 1465 重复旋律8 循环串计数 后缀自动机

    题目传送门 题意:给出一个母串,再给出n个串,问对于每个串,母串中有几个子串是可以通过循环变化得到这个串. 思路:对母串建SAM,求出$right$集. 把匹配串复制一遍,和母串进行匹配,当匹配长度大 ...

  7. [Re:从零开始的分布式] 0.x——Reids实现分布式锁

    上节提到了,分布式锁通常应满足如下要求,互斥性.高可用.高效率.可重入.锁失效这五个基本原则.由于Redis自身“快”的特点,所以高效率可以看作满足. 下文在单机情况下与多机情况下,对利用Redis实 ...

  8. 2019.4.25 表格表单与HTML5 && CSS3

    目录 表格 标签 属性 表格间距离 表格的内边距 表格的边框 样式 边框合并 行合并 列合并 display 表单 标签 属性 提交的网址 请求方式 input相关 扩大响应范围 字符 密码 单选框 ...

  9. Mac OS 10.12后Caps lock(大写键)无法使用的解决办法

    ▲打开设置中的键盘选项,并切换至输入源选项标签, ▲取消勾选“使用大写锁定键来回切换“美国英文””, ▲这时再按下Caps lock即可正常使用大小写切换. ▲Update:目前macOS 10.12 ...

  10. Orleans框架------基于Actor模型生成分布式Id

    一.Actor简介 actor模型是一种并行计算的数学模型. 响应于收到的消息,演员可以:做出决定,创建更多Actor,发送更多消息,并确定如何响应接收到的下一条消息. 演员可以修改自己的状态,但只能 ...