[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- ...
随机推荐
- 用JDBC访问MySQL
/* 在数据库中创建一个Employee的类 create table Employee( id int primary key, name varchar(20), age int); */ imp ...
- Spring相关:jdom学习:读取xml文件
云课堂马士兵的spring2.5课程中提到的 用JDOM读取XML文件需先用org.jdom.input.SAXBuilder对象的build()方法创建Document对象,然后用Document类 ...
- MVC5 + EF6 入门完整教程二:从前端的UI开始
从前端的UI开始 MVC分离的比较好,开发顺序没有特别要求,先开发哪一部分都可以,这次我们主要讲解前端UI的部分. ASP.NET MVC抛弃了WebForm的一些特有的习惯,例如服务器端控件,Vie ...
- React Native 的高度与宽度设置
React Native中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点. import React, { Component } from 'react'; import { AppRe ...
- hdu 1032
题目的意思是把输入的i,j 从i到j的每一个数 做循环,输出循环次数最大的值 易错的地方:做循环是容易直接用i进行计算 i=i/2:或i=i*3+1: 这样i的值改变就不能在做下面数的循环 #incl ...
- java_easyui体系之目录 [转]
摘要:简单介绍form的提交方式.与validatebox的结合使用. 一:form简介 Easyui中的form有两种提交方式.结合自己新添加的一种ajax提交方式.本文简单说明form的三种提交方 ...
- WCF初探-7:WCF服务配置工具使用
在上一篇WCF服务配置中,文章讲解了WCF的配置所需要的基本节点和属性构造,但是对于初学者的我们在编写程序的时候,往往对这些节点的位置和属性不是特别清楚,所以就导致我们的因配置文件错误而不能运行服务程 ...
- 开发实时壁纸(Live Wallpapers)
所谓实时壁纸,就是指手机桌面不再是简单的图片,而是运行中的动画,这个动画是由程序实时绘制的,因此被称为实时壁纸. 为了开发实时壁纸,Android提供了WallpaperService基类,实时壁纸的 ...
- HDFS中Java的API使用测试
import java.io.IOException; import java.util.Arrays; import java.util.Date; import java.util.Scanner ...
- Libgdx 开发指南——目录
本系列文档选译自libgdx github项目 wiki : https://github.com/libgdx/libgdx/wiki 由于关于Libgdx的中文文档非常稀缺,因此在这里对官方Wik ...