关于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>");

 

 

• 源文【关于label标签与表单控件的显式联系和隐式联系】最新版，请访问：
     http://www.vktone.com/articles/about_html_label_tag.html