zoukankan      html  css  js  c++  java
  • Html的label和span的区别

    从最终效果来看,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各自放在八竿子打不着的地方,但依然彼此关联——多么忠贞而催人泪下的爱情啊!

  • 相关阅读:
    集合-ConcurrentSkipListMap 源码解析
    集合-跳表SkipList
    集合-ConcurrentHashMap 源码解析
    >>《移动设计模式大观.pdf》
    >>《《iOS 人机界面准则》中文版.pdf》
    >《Web导航设计.pdf》
    >>《设计心理学名着-2 情感化设计 诺曼着.pdf》
    自制网页(html+css+js+jQuery)
    仿写抽屉新热榜 (html+css)
    运动员喝饮料问题
  • 原文地址:https://www.cnblogs.com/lijianming180/p/12239882.html
Copyright © 2011-2022 走看看