今天跟着中软卓越广州Web前端培训课程来聊一聊常见web架构设计，我们分三个方面。label标签为input元素定义标注(标记)，它不会向用户呈现任何特殊效果，和span标签类似。但label标签和span标签最大的区别就是它为鼠标用户改进了可用性，可以关联特定的表单控件。
label标签和特定表单控件关联之后，如果用户在label元素内点击文本，就会触发关联的表单控件。就是说，当用户选择该label标签时，浏览器就会自动将焦点转到和label标签相关的表单控件上。
label标签常用于与checkbox或radio关联，以实现点击文字也能选中/取消checkbox或radio。如下图，点击文字和点击前面的单选框效果相同，即加大了控件的可点击区域较大，因为点击标签或控件都将激活控件，这对于复选框和单选框特别有用。
标签的for属性应当与相关元素的id属性相同。
注释：“for”属性可把label绑定到另外一个元素。请把“for”属性的值设置为相关元素的id属性的值。
一、label标签的关联方式主要有两种，显式关联和隐式关联：
方式1、显式关联
显式关联是通过label标签的for属性，显式与另一个表单控件关联。需要注意的是，for属性的值必须是与label标签在同一文档中的可标记表单元素的id，注意是id而不是name。
方式2、隐式关联
隐式关联是直接将表单控件放到label标签内，这种情况下，label标签只能包含一个表单元素，包含多个只对第一个有效。
二、显式关联和隐式关联的优缺点：
1、显式关联优点：
可以减少标签嵌套层数
label标签和表单可以在不同的位置
2、显式关联缺点：
控件需要定义id属性
label标签和表单控件不利于作为一个整体来控制
3、隐式关联优点：
控件无需定义id
标签和控件方便作为一个整体控制
4、隐式关联缺点：
增加了标签嵌套层数
不能将标签和关联控件放到不同的位置
以上是个人对两种方式的看法，使用时可按需要选择显式或隐式。
三、label标签的浏览器支持及可关联的表单元素
所有主流浏览器都支持label标签。Safari2或更早的版本不支持label标签。
能使用显式关联的表单元素有：
inputtype=text文本框，点击标签时关联的文本框获得焦点。
inputtype=checkbox复选框，点击标签时选中或取消选中复选框。
inputtype=radio单选框，点击标签时选中单选框。
inputtype=file文件上传，点击标签时打开文件选择对话框。
inputtype=password密码框，点击标签时密码框获得焦点。
textarea文本域，点击标签时文本域获得焦点。
select下拉框，点击标签时，下拉框获得焦点，不过并不展开下拉框选项。