16.8　为表单组件添加标签

HTML提供了对标签进行标记的方法，这样就可以将它们与相关联的元素正式地连接起来，还可以用于编写脚本和其他目的。目前，你已经在一些例子中看到了带for属性的label元素，用于对每个表单元素提供解释性信息。

例如，在访问者应该输入其姓名中的名的文本字段之前，可能有“First Name:”的字样，如图16.8.1所示。

<fieldset>
     <h2 class="account">Account</h2>
     <ul>
        <li>
           <label for="first_name">First Name:</label>
           <input type="text" id="first_name" name="first_name" class="large" />
        </li>
        <li>
           <label for="last_name">Last Name: </label>
           <input type="text" id="last_name" name="last_name" class="large"/>
        </li>
     </ul>
</fieldset>

图16.8.1　以正式的方式对标签进行标记提供了一种在样式表中识别它们的简单方法。如果在label中使用for属性，该属性的值应该与对应表单元素的id属性值相同

有时，placeholder被错误地用做了label。应该只在需要提供提示信息的情况下使用placeholder。

为表单组件添加正式标签的步骤

• 输入。

• 如果需要，输入for="idname">，这里的idname是对应表单元素的id属性值。

• 输入标签的内容。

• 输入。

提示　如果使用for属性，就必须同时在相关联的form元素的开始标记中添加id属性，才能使for属性生效（否则，文档无法通过验证）。

提示　如果省略for属性，那么对于需要添加标签的元素，id属性并不是必需的。在这种情况下，标签和该元素之间是通过邻近原则（如位于同一个li元素）联系在一起的。

提示　另一种添加标签的技术是使用title属性。更多信息参见3.16节。另外，placeholder属性无法完全替代标签。

提示　可以使用CSS对标签添加格式，如图16.8.2和图16.8.3所示。

label {
    display: inline-block;
    padding: 3px 6px;
    text-align: right;
    width: 150px;
    vertical-align: top;
}

图16.8.2　为字段的标签添加样式可以让表单变得更为美观和用户友好

图16.8.3　对于单选按钮和复选框的标签，用户不仅可以通过点击表单元素改变其状态，还可以通过点击标签改变表单元素的状态