表单语义化

label标签

语法： <label for="">说明性文字</label>
说明：label标签for属性值为所关联的表单元素的id，例如<input id="name" type="text"/>，则其所关联的label标签应该为<label for="name"></lable>。

label标签的for属性有2个作用：

• 1）语义上绑定了label元素和表单元素；
• 2）增强了鼠标可用性。也就是说我们点击了label中文本的时候，其所关联的表单元素也会获得焦点；

for属性使得鼠标单击的范围扩大到label元素上，极大地提高了用户单击的可操作性。事实上，label标签有两种关联方式，我们拿复选框来说，下面两行代码是等价的：

<input id="cbk" type="checkbox"/><label for="cbk">复选框</label><label for="cbk">复选框<input id="cbk" type="checkbox"/></label>

fieldset标签和legend标签

在表单中，我们还可以使用fieldset标签来给表单元素进行分组。其中，legend标签用于定义某一组表单的标题。

语法：

<fieldset>    <legend>表单组标题</legend>    ……</fieldset>

说明：

使用fieldset和legend标签有2个作用:

• 1）增强表单的语义；
• 2）可以定义fieldset元素的disabled属性来禁用整个组中的表单元素；

如下代码:

<form action="" method="post">    <fieldset>        <legend>登录</legend>        <p>            <label for="name">账号：</label><input type="text" id="name" name="name" />        </p>        <p>            <label for="pwd">密码：</label><input type="password" id="pwd" name="pwd" />        </p>        <input type="checkbox" id="remember-me" name="remember-me" /><label for="remember-me">记住我</label>        <input type="submit" value="登录" />    </fieldset></form>