`
coding1688
  • 浏览: 239606 次
  • 来自: 上海
社区版块
存档分类
最新评论

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

阅读更多

在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>");

 

 

 

4
1
分享到:
评论

相关推荐

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -Grid中TemplateField生成到页面中控件具有唯一ID,例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...

    ExtAspNet_v2.3.2_dll

    -Grid中TemplateField生成到页面中控件具有唯一ID,例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...

    ASP.NET的网页代码模型及生命周期

    ASP.NET页框架模型隐式的为用户建立了事件和事件处理程序的关联。ASP.NET让用户可以为从浏览器传递的事件在服务器代码中设置相应的处理程序。假设某个用户正在浏览网站并与页面之间产生了某种交互,用户的操作就会...

    html入门到放弃笔记

    按照元素们的表现形式来分类,分为 行内元素 和 块级元素1、行内元素 在一行内允许显示多个元素的,称为 "行内元素" span,i,b,s,u,sup,sub 作用:包裹文本,并处理文本的表现形式 2、块级元素 每个元素独占一...

    CSS使用学习总结

    在表单布局中,`fieldset`用于分组相关表单元素,`label`则帮助用户与表单控件交互,隐式和显式方式各有优势。需要注意的是,是否在表单中使用段落是有争议的,因为段落可能影响布局。 为了让设计居中,可以使用几...

    《javaScrip开发技术大全》源代码

    • sample01.htm 将JavaScript代码插入在标签与标签之间 • sample02.htm 将JavaScript代码放在了标签与标签之间 • sample03.htm JavaScript与HTML混合执行 • sample04.htm 在同...

Global site tag (gtag.js) - Google Analytics