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快捷键

  2. 使用urllib编写python爬虫

    新版python中,urllib和urllib2合并了,统一为urllib (1)简单爬取网页 import urllib content = urllib.request.urlopen(req). ...

  3. MySQL 主从热备份(读写分离)

    MySQL的主从备份,听个名词很高大上,其实都是MySQL原本就实现的了,你只需要简单配置一下就可以实现. 第一步:保持主从两个数据库是同步的,最好事先手动同步一下: 第二步:停止两个数据库,分别更改 ...

  4. (BFS)poj1465-Multiple

    题目地址 题意可理解为我们有一些给定的元素,要用它们组成数,如果一个长度(x)所有组成的数都不是给定的另一个数(n)的倍数,并且长度为x的数中有模n的不同于长度小于x的数模n的数,那么继续延长这个数的 ...

  5. golang——slice使用摘要

    1.slice因capacity不足而重新分配的underlying array与原本的array空间是断裂的,就是说这是原本指向的空间没变,如下 arr := [...]int{1, 2, 3, 4 ...

  6. HTML新增属性

    1.<input type="text" required必填  placeholder="默认显示内容"  autofocus自动获取焦点 /> ...

  7. 原生javascript和jquery实现简单的ajax例子

    后台C#代码 public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/p ...

  8. quartz.net 使用(一)-执行定时计划任务

    一.使用nuget安装所需要的包 Install-Package Quartz 二.实现自己的job继承IJob public class FirstJob : IJob { public void ...

  9. Ubuntu Command-Line: Enable Unlimited Scrolling in the Terminal

    At times when using the terminal, the output from a command can be so long, you simply can’t scroll ...

  10. NOI Linux JAVA

    右键open with another application 里输javaws 按ctrl+shift+del,调出火狐内置的清除最近的历史记录工具(或者按alt键弹出菜单,工具->清空最近历 ...