label 标签的for的作用和构建表单结构时改善用户体验的建议

一般我们在构建表单的时候，会用到label标签，label标签页通常是下面两种用法：

1.for绑定的时name属性里面的值，

<div class="form-group">
  <label for="name">用户名：</label>
   <input type="text" id="userName" name="name"/>
</div>

2.for绑定的事id属性里面的值

<div class="form-group">
  <label for="userName">用户名：</label>
   <input type="text" id="userName" name="name"/>
</div>

这是通过label标签for的属性绑定到对应的表单域中，

这种做法的好处是，用户鼠标点击用户名这个汉字字段时，input框对应的会自动获取到焦点。

如下图：