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

隐式和显式的联系

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

显式的联系:
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" /> 隐式的联系:
<label>Date of Birth: <input type="text" name="DofB" /></label>

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

html5中新增的form属性:

form 属性规定 label 所属的一个或多个表单。

form 属性的值必须是其所属的表单的 id。

如需引用一个以上的表单,请使用空格分隔的列表。

建议:不推荐使用form属性,经过实际测试,即使不使用form属性指向表单也可以在表单外指向表单内的元素,因为页面元素的id是唯一的,根本用不着form来进行区分此label属于哪个表单。

所以如果能保证页面元素id唯一,那么只是用for属性就可以了,如果不能保证页面元素id唯一那么推荐使用隐式绑定即使目标元素id重复也无碍(如果你想着使用form属性来解决这种情况,你会发现form属性根本不起作用,起作用的还是for属性,它会指向重复id第一次出现的元素)。

就当form属性不存在吧,一点用都没有。

[HTML5]label标签使用以及建议的更多相关文章

  1. 说说HTML5中label标签的可访问性问题——张鑫旭

    一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...

  2. HTML5新标签与特性---新表单+新属性----综合案例1

    HTML5新标签与特性 兼容性问题 (ie9 以上的版本) 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTM ...

  3. html5 新增标签和特性

    文档类型设定 document HTML: XHTML: HTML5 字符设定 <meta http-equiv="charset" content="utf-8& ...

  4. Html5新标签解释及用法

    Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...

  5. Html5新标签及用法

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2  HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...

  6. HTML5 <Audio/>标签Api整理(二)

    1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...

  7. label 标签

    <label> 标签为 input 元素定义标注内容 label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本,就会触发此控件.就是 ...

  8. HTML5 常用标签整理

    <!--1.  html5 文本 --> <div> <header> <hgroup> <h1>h1</h1> <h2& ...

  9. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

随机推荐

  1. IntelliJ UI安装

  2. Octopus系列之数据上传格式要求说明

    各个数据列要求 价格列:字符串类型[美元价格] 产品名字:可以支持"/"等字符 分类名字:去空格处理 不得包含"&"符号 主图:一定要有主图列 不为空 ...

  3. iOS开发UI篇—Kvc简单介绍

    ios开发UI篇—Kvc简单介绍 一.KVC简单介绍 KVC key valued coding 键值编码 KVC通过键值间接编码 补充: 与KVC相对的时KVO,即key valued observ ...

  4. JavaWeb chapter3 Servlet处理HTTP响应

    1.  设置响应状态行 HTTP状态码:1XX,信息性代码: 2XX,客户请求成功: 3XX,用于已经移走的资源文件,指示新的地址: 4XX,由客户端引发的错误: 5XX,由服务器端引发的错误. 2. ...

  5. awakeFromNib与viewDidLoad的区别

    当一个nib文件对应两个类,File's Owner的class为XXXViewController,Objects下的View对应的为XXXView时: awakeFromNib:在XXXView. ...

  6. Leetcode 1 two sum 难度:0

    https://leetcode.com/problems/two-sum/ class Solution { public: vector<int> twoSum(vector<i ...

  7. Jupyter notebook 安装,初步使用

    在学习算法,图像处理过程中,理论结合实际的时候总要写一些程序,我用的是PYTHON.这时候,选择一款称手的工具比较重要.之前我用自带的IDLE,也还可以,但是操作不够便捷,文件组织也不是很好.后来想用 ...

  8. CodeForces 688E-The Values You Can Make

    题意: 给出n,k,分别代表硬币的数量与巧克力的价格,n个整数c1,c2,...ci...cn(ci代表第i块硬币的值);你可以从n块硬币中拿出金额恰好为k的硬币数并将其中的任意两块硬币组合得到一个数 ...

  9. excel列递增方法技巧

    最近处理世界买家网100多万的数据,需要用到excel来对数据进行处理,其中有一项是对数据做一个排序,以方便数据导入时来对应唯一的id编号,之前都是 几万,最多也是30来万的数据,所以列递增就直接用鼠 ...

  10. matlab 非平稳变化时域分析

    对于非平稳信号,由于傅立叶变换核心函数-正弦函数具有无限性,因此选用短时窗来分析局域信号: 需要注意的时,选取完滑动的时间窗一般是中心对称而且为奇数,这时被分析的时间点正好是滑动窗的中点. 因此,时域 ...