当前位置:首页 > 开发 > Web前端 > 前端 > 正文

关于label标签与表单控件的显式联系和隐式联系

发表于: 2013-01-12   作者:coding1688   来源:转载   浏览:
摘要: 在html中,<label> 标签为 input 元素定义标签(我称之为输入提示)。 label 元素不会向用户呈现任何特殊效果。它为鼠标用户改进了可用性。如果在 label 元素内点击文本,就会触发此input控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。 <label> 标签的 for 属性应当与相关元素的 id 属性相同。 比如

在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>&nbsp; </li>");
                        */

                        // 改用隐式的联系,代码简洁
                        $cblist.append("<li><label class='none'><input type='checkbox' name='${field.sysName}' value='" +value +"'"
                            + (found ? " checked='checked'" : "")
                            + "/> " +json.data[i].text+"</label>&nbsp; </li>");

 

 

 

关于label标签与表单控件的显式联系和隐式联系

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号