[HTML5]label标签使用以及建议
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标签使用以及建议的更多相关文章
- 说说HTML5中label标签的可访问性问题——张鑫旭
一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...
- HTML5新标签与特性---新表单+新属性----综合案例1
HTML5新标签与特性 兼容性问题 (ie9 以上的版本) 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTM ...
- html5 新增标签和特性
文档类型设定 document HTML: XHTML: HTML5 字符设定 <meta http-equiv="charset" content="utf-8& ...
- Html5新标签解释及用法
Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...
- Html5新标签及用法
HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...
- HTML5 <Audio/>标签Api整理(二)
1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...
- label 标签
<label> 标签为 input 元素定义标注内容 label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本,就会触发此控件.就是 ...
- HTML5 常用标签整理
<!--1. html5 文本 --> <div> <header> <hgroup> <h1>h1</h1> <h2& ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
随机推荐
- JS的学习体会与分享
最近在学习js这门计算机网络的新知识.相比与之前所学习的html和css这两门编程语言,js 还是有很多的不同之处,它相比于前两门知识还是有一定的难度和逻辑性的.今天跟大家分享一篇文章,希望能从中获得 ...
- C#驱动及应用
一,使用开源客户端:StackExchange.Redis 二,使用方法: 1,获取访问redis数据库连接,代码如下. /// <summary> /// 获取访问redis数据 ...
- iOS开发拓展篇—音乐的播放
iOS开发拓展篇—音乐的播放 一.简单说明 音乐播放用到一个叫做AVAudioPlayer的类,这个类可以用于播放手机本地的音乐文件. 注意: (1)该类(AVAudioPlayer)只能用于播放本地 ...
- 【BZOJ】2719 银河之星
可以将棋子分为9种类型.且可以通过合并使得两个不同种类棋子转换为另一种棋子(不过要注意棋盘大小,有的时候硬要合并会到棋盘外面,可以先把棋盘全部转换,然后枚举每一个棋子的转换).然后把状态压成一个十位的 ...
- 【jQuery】serializeArray()与serialize()的区别
serialize()序列化表单元素为字符串,用于 Ajax 请求. serializeArray()序列化表单元素为JSON数据. 具体实例如下: 1 <!DOCTYPE html PUBLI ...
- POJ 2226 最小点覆盖(经典建图)
Muddy Fields Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8881 Accepted: 3300 Desc ...
- Java设计模式系列2--工厂方法模式(Factory Method)
2014-02-26 09:56:45 声明:本文不仅是本人自己的成果,有些东西取自网上各位大神的思想,虽不能一一列出,但在此一并感谢! 工厂方法模式分为三种: 1. 普通工厂模式 建立一个工厂类,对 ...
- PHP日志扩展 SeasLog-1.6.8, 性能更优
SeasLog-1.6.8 发布了,性能更优. 改进日志: 1.6.8: 优化内存使用和性能,修复已知Bug. - Fixed issue #97 PHP5.* Cached Block. - Fix ...
- Visual Studio 2008打开vs2010解决方案的方法
一个朋友遇到了个问题:用visual studio 2008软件,无法打开一个asp.net网站的sln解决方案.如下图,原因是此解决方案由vs2010生成的,必须由vs2010运行程序打开. 这样一 ...
- Oracle GoldenGate for Big Data 12.2.0.1的新特性
ogg for bigdata 12.2已经发布,新增有如下特性:支持java replicat进程OGG12.2中开发了基于java的replicat模式,以前的版本是基于extract进程中使用u ...