Html的label和span的区别
从最终效果来看,label与span标签显示方式及作用都一样的
但由于label中有for属性的存在,也有着决定性的不同
for属性将label和表单进行配对
label标签通常是写在表单(form)内的,他与一个普通的span最大的不同,就是可以和表单元素配对,比如文本框,单选框,复选框。而配对的方法,就是通过label的for属性。
比如
1 |
<input type="text" name="" id="a" /><label for="b">点击字,文本框获取焦点</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的区别的更多相关文章
- label和span的区别
label标签主要用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点. <div class="form-group col-lg-12"&g ...
- 关于label和span设置width无效问题解决方法
转:http://www.jb51.net/web/113507.html 大家可能不知道默认情况下label.span 设置width 是无效的,只有当display:block时,我们所设置的wi ...
- DIV与SPAN的区别
DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表(共同点). 两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素). 详解:1 ...
- div和span的区别
<div>是一个块级元素,我们可以把它比喻成盒子,它没什么实际语义能用到很多地方,独占一行不能和其它元素在一行,它还能把<div>和<span>”装在盒子里”,主要 ...
- css案例学习之div与span的区别
代码: <html> <head> <title>div 标记范例</title> <style type="text/css" ...
- yii中调取字段名称时label与labelEx的区别
$form = $this->beginWidget('CActiveForm',array('id' => 'userRegisterForm')); echo $form->la ...
- asp.net中Literal与label的区别
Literal 控件表示用于向页面添加内容的几个选项之一.对于静态内容,无需使用容器,可以将标记作为 HTML 直接添加到页面中.但是,如果要动态添加内容,则必须将内容添加到容器中.典型的容器有 La ...
- (转)asp.net中Literal与label的区别
asp.net中Literal与label的区别 一.Literal Web 服务器控件概述(摘于MSDN) 可以使用 Literal Web 服务器控件作为页面上其他内容的容器.Literal 最常 ...
- [转]div与span区别及用法
DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候, ...
随机推荐
- Window命令行切换命令
Windows 命令行切换目录 特别注意:切换到其它盘符不需要 cd 命令 1. 切换到 C 盘根目录 打开终端 cmd 后,输入cd C:\(一定要加上后面的反斜扛) 2.切换到 C 盘子目录 打开 ...
- a标签的一些特殊使用
<a href="tel:10086">10086</a> //点击后直接拨打10086 <a href="mailto:c1586@qq ...
- split - 拆分文件
拆分文件 # 每个文件的行数为1000行 split -l 1000 test.txt # 将test文件拆分,20M一个文件 split -b 20M test.txt test文件拆分,并且文件名 ...
- Iterator接口(迭代器)的使用
Iterator接口(迭代器) 前言 在程序开发中,经常需要遍历集合中的所有元素.针对这种需求,JDK专门提供了一个接口java.util.Iterator.Iterator接口也是Java集合中的一 ...
- easyui分页控件的应用
1.首先应用easyui的js和css文件 <link rel="stylesheet" type="text/css" href="../.. ...
- Drools规则引擎详解-常用的drl实例
package droolsDemo //说明:每个 drl 都必须声明一个包名,这个包名与 Java 里面的不同,它不需要与文件夹的层次结构一致, //主要用于可以根据kmodule.xml中不同的 ...
- Asexual inheritance
Asexual inheritance 1,2分别是两种基因型 N1,N2是两种基因型的亲代个数,Wt是t代后每一个每一个基因型的后代数 N1’,N2’是t代后1,2,基因型的个体数 the prop ...
- 2018-1 WebStorm最新版本破解激活方法
在激活页面选择License Server,输入:http://idea.codebeta.cn,点击Activate即可激活. 如果失效用这个: http://idea.ibdyr.com
- day48-线程-信号量
#1.信号量,用来保证多个线程不会互相冲突. #2.迷你唱吧:每次只能有两人在里面唱k: from threading import Thread from threading import Sema ...
- 对xgboost中dump_model生成的booster进行解析
xgboost原生包中有一个dump_model方法,这个方法能帮助我们看到基分类器的决策树如何选择特征进行分裂节点的,使用的基分类器有两个特点: 二叉树: 特征可以重复选择,来切分当前节点所含的数据 ...