从最终效果来看,label与span标签显示方式及作用都一样的
但由于label中有for属性的存在,也有着决定性的不同

for属性将label和表单进行配对

label标签通常是写在表单(form)内的,他与一个普通的span最大的不同,就是可以和表单元素配对,比如文本框,单选框,复选框。而配对的方法,就是通过label的for属性。

比如

1
2
<input type="text" name="" id="a" /><label for="b">点击字,文本框获取焦点</label><br/>
<input type="text" name="" id="b" /><label for="a">点击字,文本框获取焦点</大专栏  Html的label和span的区别ass="name">label><br/>

测试以上代码,可以看到,当点击字的时候,会根据label的for属性的值,找到对应的id元素
也就是说,只是点击文字,对应的input也能获得焦点

将lable改成span,然后加上了for,但没有作用,这就是span与label的区别了。

功能与for相当的另一种写法

如果你不想给label加for,但又想把input元素后面的文字和input本身关联起来,那你也可以这样:

1
<label><input type="checkbox" name="aksd" id="aksd" /> 几个字</label>

就是用label把input包起来。这样的效果与input后紧跟加for的label效果相同:点击文字即可选中复选框。

同样,把代码中的label换成span就不行了。

注意:label包input的方法,在IE6下无效!

推荐input与label分离的模式,因为这样更灵活,你可以把input与label各自放在八竿子打不着的地方,但依然彼此关联——多么忠贞而催人泪下的爱情啊!

Html的label和span的区别的更多相关文章

  1. label和span的区别

    label标签主要用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点. <div class="form-group col-lg-12"&g ...

  2. 关于label和span设置width无效问题解决方法

    转:http://www.jb51.net/web/113507.html 大家可能不知道默认情况下label.span 设置width 是无效的,只有当display:block时,我们所设置的wi ...

  3. DIV与SPAN的区别

    DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表(共同点). 两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素). 详解:1 ...

  4. div和span的区别

    <div>是一个块级元素,我们可以把它比喻成盒子,它没什么实际语义能用到很多地方,独占一行不能和其它元素在一行,它还能把<div>和<span>”装在盒子里”,主要 ...

  5. css案例学习之div与span的区别

    代码: <html> <head> <title>div 标记范例</title> <style type="text/css" ...

  6. yii中调取字段名称时label与labelEx的区别

    $form = $this->beginWidget('CActiveForm',array('id' => 'userRegisterForm')); echo $form->la ...

  7. asp.net中Literal与label的区别

    Literal 控件表示用于向页面添加内容的几个选项之一.对于静态内容,无需使用容器,可以将标记作为 HTML 直接添加到页面中.但是,如果要动态添加内容,则必须将内容添加到容器中.典型的容器有 La ...

  8. (转)asp.net中Literal与label的区别

    asp.net中Literal与label的区别 一.Literal Web 服务器控件概述(摘于MSDN) 可以使用 Literal Web 服务器控件作为页面上其他内容的容器.Literal 最常 ...

  9. [转]div与span区别及用法

    DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候, ...

随机推荐

  1. 吴裕雄--天生自然 PYTHON3开发学习:正则表达式

    import re print(re.match('www', 'www.runoob.com').span()) # 在起始位置匹配 print(re.match('com', 'www.runoo ...

  2. Java中的堆、栈、方法区

    堆区: 1.存储的全部是对象,每个对象都包含一个与之对应的class的信息.(class的目的是得到操作指令) 2.jvm只有一个堆区(heap)被所有线程共享,堆中不存放基本类型和对象引用,只存放对 ...

  3. unless|until|LABEL|{}|last|next|redo| || |//|i++|++i

    #!/usr/bin/perl use strict; use warnings; $_ = 'oireqo````'; unless($_ =~ /^a/m){print "no matc ...

  4. Hibernate基础数据类型

    Java数据类型 Hibernate数据类型 byte,java.lang.Byte byte short,java.lang.Short short int,java.lang.Integer in ...

  5. android打飞机游戏、MVP句子迷App、悬浮窗、RxJava+Retrofit、加载动画、定制计划App等源码

    Android精选源码 微信打飞机 android进度设置加载效果源码 Android新手引导库EasyGuide MVP-好看又好用的句子迷客户端 XFloatView 一个简易的悬浮窗实现方案 a ...

  6. springboot FreeMarker template error

    注释掉<#list>xxx</#list> 现在运行就不报错了

  7. Canal监控Mysql同步到Redis(菜鸟也能搭建)

    首先要Canal服务端下载:链接: https://pan.baidu.com/s/1FwEnqPC1mwNXKRwJuMiLdg 密码: r8xf 连接数据库的时候需要给予连接数据库权限:在my.i ...

  8. 吴裕雄--天生自然python学习笔记:python 用 Open CV通过人脸识别进行登录

    人脸识别登录功能的基本原理是通过对比两张图片的差异度来判断两张图片是 否是同 一人的面部 . 对比图片 差异度 的算法有很多种,本例中使用“颜色直方图” 算法来实现对人脸图像的识别. 下面为比较 im ...

  9. 做成像的你不能不了解的真相7-两分钟测算相机增益(Gain)

    前几期真相文章得到了读者积极的反馈,其中提问最多的就是这个公式: 首先,大家觉得这个公式太有用了.以前只能定性地评价图像质量,现在一下子就能直接算出信噪比,瞬间高大上了许多有木有.然而,杯具的现实是, ...

  10. Helvetic Coding Contest 2019 差A3 C3 D2 X1 X2

    Helvetic Coding Contest 2019 A2 题意:给一个长度为 n 的01序列 y.认为 k 合法当且仅当存在一个长度为 n 的01序列 x,使得 x 异或 x 循环右移 k 位的 ...