定义和用法

for 属性规定 label 与哪个表单元素绑定。

隐式和显式的联系

标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 <label> 标签下的 for 属性命名一个目标表单 id,这样就是显式形式。

例如,在 XHTML 中:

显式的联系:

[html] view plaincopy

  1. <label for="SSN">Social Security Number:</label>
  2. <input type="text" name="SocSecNum" id="SSn" />

隐式的联系:

[html] view plaincopy

  1. <label>Date of Birth: <input type="text" name="DofB" /></label>

第一个标记是以显式形式将文本 "Social Security Number:" 和表单的社会安全号码的文本输入控件("SocSecNum") 联系起来,它的 for 属性的值和控件的 id 一样,都是 SSN。第二个标记 ("Date of Birth:") 不需要 for 属性,它的相关控件也不需要id 属性,它们是通过在 <label> 标签中放入 <input> 标签来隐式地连接起来的。

实例

带有两个输入字段和相关标记的简单 HTML 表单:

[html] view plaincopy

  1. <form>
  2. <label for="male">Male</label>
  3. <input type="radio" name="sex" id="male" />
  4. <br />
  5. <label for="female">Female</label>
  6. <input type="radio" name="sex" id="female" />
  7. </form>

 

另外:在javascript中实现建立联系

 //*-------为每个radio标签添加id,为每个label标签添加for属性-------   window.onload = function(){     var theWrapDiv = document.getElementById('carList');         var theLabel = theWrapDiv.getElementsByTagName("label");         var theInput = theWrapDiv.getElementsByTagName("input");
for(i = 0; i < theInput.length; i ++){    theInput[i].id = "state" + i;         }
for(j = 0; j < theLabel.length; j ++){            theLabel[j].setAttribute("for","state" + j);         }   }

HTML<label> 标签的 for 属性的更多相关文章

  1. HTML <a> 标签的 target 属性

    HTML <a> 标签的 target 属性 HTML <a> 标签 定义和用法 <a> 标签的 target 属性规定在何处打开链接文档. 如果在一个 <a ...

  2. JS组件系列——使用HTML标签的data属性初始化JS组件

    前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...

  3. 常见标签的默认属性值及相互作用——关于CSS reset的思考

    在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div{ padding:0px; ...

  4. 局部(或全局)设置<a>标签的target属性

            对于超链接<a>标签,target属性的设置是比较关键的,在不同的用户场景下选用适合的新页面载入方式,可以大大的提高访客的体验感.我们一般对target的设置可以挨个来,但 ...

  5. 【HTML5 video】video标签的部分属性解析

    转自:http://www.cnblogs.com/kiter/archive/2013/02/25/2932157.html 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Th ...

  6. HTML5 <a>标签的ping属性用法

    随着移动互联网用户井喷式的增长,web前端开发中的HTML5在近几年备受瞩目,越来越多的人从事html5开发相关工作.今天小编也来凑个热闹,和大家一起来谈谈HTML5中<a>标签的ping ...

  7. 查看某个html标签有哪些属性和事件

    <html><head><script> //查看input标签有哪些属性和事件 function a() { var str = new String(" ...

  8. HTML <input> 标签的 type 属性

    HTML <input> 标签的 type 属性 HTML <input> 标签 实例 下面的表单拥有两个输入字段以及一个提交按钮: <form action=" ...

  9. a标签无disabled属性

    <a class="button">确认</a> 我们经常会用a标签来设置按钮样式,如果点击它跳转页面,那么没有任何问题. 如果绑定了ajax事件,即点击后 ...

随机推荐

  1. awk学习

    首先分享一个哥们的文章:http://coolshell.cn/articles/9070.html

  2. Centos System Info

    系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # ho ...

  3. poj 3469 Dual Core CPU【求最小割容量】

    Dual Core CPU Time Limit: 15000MS   Memory Limit: 131072K Total Submissions: 21453   Accepted: 9297 ...

  4. sql server smo

    在SQL Server2005以前的版本中,SQL分布式管理对象(SQL-DMO)为我们提供了非常有效的方法来通过编程的方式管理SQL Server.SQL-DMO支持基于COM的接口,开发人员可以通 ...

  5. Linux学习笔记——软件包管理

    1.RPM包的管理 RPM软件包的一个例子: sudo-1.7.2p1-5.el5.i386.rpm 这个rpm包名包括软件名sudo,版本号1.7.2p1,发行号5.el5,和硬件平台i386 (1 ...

  6. CCS样式表小结

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  7. Android UI开发第三十三篇——Navigation Drawer For Android API 7

    Creating a Navigation Drawer中使用的Navigation Drawer的android:minSdkVersion="14",现在Android API ...

  8. 让ie9之前的版本支持canvas

    原来google的研发人员早就帮我们解决了这问题. 在这里我们得首先感谢google 在这链接http://excanvas.sourceforge.net/ 下载下来后 吧excanvas.js引入 ...

  9. drop table big_table 调试

    (gdb) thread apply all bt Thread (Thread )): # # /storage/innobase/os/os0sync.cc: # ) at /usr/src/my ...

  10. MTU of IPV4 and IPV6

    通信术语 最大传输单元(Maximum Transmission Unit,MTU)是指一种通信协议的某一层上面所能通过的最大数据包大小(以字节为单位).最大传输单元这个参数通常与通信接口有关(网络接 ...