关于label标签与表单控件的显式联系和隐式联系
来源:互联网 发布:a星寻路算法 js 编辑:程序博客网 时间:2024/05/08 20:59
在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标签与表单控件的显式联系和隐式联系
- HTML5 label 显式、隐式联系
- html表单与页面控件联系
- Web服务器控件和HTML控件的区别与联系
- 生成式和判别式的联系与区别
- 类与控件的联系与区别
- &&和&的联系与区别
- 关于CreateThread和_beginthreadex的区别与联系
- 关于CreateThread和_beginthreadex的区别与联系
- 关于Session和Cookie的区别与联系
- CEGUI控件和响应函数的 联系机制
- 关于PO 和PR 的联系问题
- (转)表单显式label和隐式label对屏幕阅读器用户的影响–更新
- html服务器控件 与 web服务器控件 的区别和联系
- HTML控件和Web控件的区别和联系
- HTML控件和WEB控件的区别和联系
- 堆和栈的联系与区别
- BS和CS的联系与区别
- java.lang.reflect.InvocationTargetException(java.lang.StackOverflowError)
- I2C总线原理
- 如何隐藏一个文件到图片后面
- 关于Dev c++ 不能在Win8系统下正常编译、运行的问题
- 【编程】我的第三个android程序-Snake之穿墙贪吃蛇
- 关于label标签与表单控件的显式联系和隐式联系
- c++软件开发第三方库大全
- 去掉多余的回车符
- 神权与王权
- 1月10日,130余名农民工在富平县人民广场集体下跪讨薪。
- ubuntu中root和普通用户相互切换
- AutoCompleteTextView和MultiAutoCompleteTextView的区别
- HTML004——多媒体
- cocos2d-x初探学习笔记(30)2.1新特性之CCClippingNode