在html中,<label> 标签为 input 元素定义标签(我称之为输入提示)。
label 元素不会向用户呈现任何特殊效果。它为鼠标用户改进了可用性。如果在 label 元素内点击文本,就会触发此input控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
比如:
<p>请点击文本标记之一,就可以触发相关控件:</p>
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
</form>
在具体使用时,如果 input 类型为 text ,一般将输入提示写在输入控件的左边;而 input 类型为 radio 或 checkbox 时,一般在输入控件的右边(也有写在左边的,如上面的例子)。
for 属性规定 label 与哪个表单元素绑定。
隐式和显式的联系
标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 <label> 标签下的 for 属性命名一个目标表单 id,这样就是显式形式。
例如,在 XHTML 中:
显式的联系:
<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> 标签来隐式的连接起来的。
如果是通过 js 或 jsp 来动态生成 <label>和<input>,最好还是采用隐式的联系,更好实现,因为不必分配和生成 id,要做到同一个网页中id不重复还是有点费劲的。
实际使用的例子:使用 FreeMarker 和 JavaScript 综合生成代码
/* 以前采用显式的联系,生成id费劲,还要避免与别的id重复
$cblist.append("<li><input type='checkbox' id='form${form.formId}_${field.sysName}_"
+i
+"' name='${field.sysName}' value='"
+value
+"'" + (found ? " checked='checked'" : "") + "/> "
+"<label class='none' for='form${form.formId}_${field.sysName}_"
+i
+"'>"
+json.data[i].text+"</label> </li>");
*/
// 改用隐式的联系,代码简洁
$cblist.append("<li><label class='none'><input type='checkbox' name='${field.sysName}' value='" +value +"'"
+ (found ? " checked='checked'" : "")
+ "/> " +json.data[i].text+"</label> </li>");
- 源文【关于label标签与表单控件的显式联系和隐式联系】最新版,请访问:
http://www.vktone.com/articles/about_html_label_tag.html
相关推荐
如何显式和隐式地链接dll,test.dll作为链接的对象,简单的举例
Oracle显式游标和隐式游标.doc
为什么要写显式启动与隐式启动Activity,Android的Acitivity启动大致有两种方式:显式启动与隐式启动,下面分别介绍
02_显式原型与隐式原型.html
【GAMES101】作业8 显式/半隐式欧拉与Verlet方法模拟绳子运动
笔记,csdn搜可以搜到,自己的总结。
隐式调用dll和显式调用dll,并做了demo在同一个solution下编译就可以尝试,通过宏来控制隐式和显示调用。显示调用即使dll改名依然能够获取函数地址,通过函数指针来使用。
内容概述:SQL Server数据库相关内容,对应张磊著《SQL Server数据库应用技术项目化教程》中166页(3)ROLLBACK TRANSACTION将显式事务或隐式事务回滚到事务的结束所对应的源码。代码经个人运行后无误,如果下载后运行...
显式和隐式、过滤器intent的使用,欢迎有需要的朋友下载!
abaqus显示和隐式算法的差别.pdf
activity显式隐式跳转,提供显式隐式跳转方式代码
c语言编写阿当姆斯显式与隐式,例子来源于李庆扬第五版数值分析书
在质量弹簧阻尼器系统上比较隐式与显式欧拉。 隐式方法基于以下论文: D. Baraff 和 A. Witkin,“布料模拟中的大步骤”,第 25 届计算机图形和交互技术年会论文集 - SIGGRAPH '98,1998,第 43-54 页。
微分方程一维抛物热传导方程向前向后欧拉C-N...显式欧拉,隐式欧拉,梯形公式,改进欧拉 五点差分,九点差分 差分格式,紧差分格式 直拿,只有pdf版方法说明 word版 公式纯手打 数值例子有数据图解分析 含源码和流程图
偏微分方程数值解 双曲型方程-显示与隐式 源代码及算法原理简介 编程语言:Matlab 参考书籍《偏微分方程数值解》
资源包括一个创建DLL的工程,一个使用DLL的工程,共俩个工程。...附带一个说明文档,分为静态(隐式)链接方式和动态(显式)链接方式详细介绍了DLL的创建以及使用方式。 简单明了,一学包会,不坑爹。
Android中Intent的详解(显式,隐式,系统,startActivityForResult);非常全面,但不深刻
神经网络模型在显式与隐式特征下的情感分类应用研究.pdf