使用label元素连接文本标签和表单控件_20160415
说明
该技巧的目的是使用label元素与特定控件元素联系起来。label可以使用for属性与特定表单元素联系起来。for属性的值为目标表单控件的id属性一致。
id属性可能与name属性相同，id和name必须都被提供，id必须在网页上是唯一的。
通过使用CSS可以将label隐藏，但是为了满足可理解性，label应该是可见的，为所有用户提供帮助理解区域的目的。
该技巧的另一个好处是控件有一个大的点击区域，因为点击标签或者控件都可以激活控件，这对运动障碍用户有帮助。
注：类型为checkbox和radio的input元素的label标签在控件后面；
注1：可以使用该技巧的元素有：
input type="text"
input type="checkbox"
input type="radio"
input type="file"
input type="password"
textarea
select
注2：label元素不适用以下元素，以下元素可以通过使用value属性（submit和reset按钮），alt属性（image按钮），或者其他按钮；
Submit and Reset 按钮 ( input type="submit" or input type="reset")
Image按钮 ( input type="image")
Hidden input fields ( input type="hidden")
Script 按钮 (button elements or ＜input type="button"＞)
样例
样例1：文本输入区域
效果
样例2：复选框
效果
样例3：单选按钮
效果
选择甜甜圈
选择甜甜圈的种类，然后选择购买按钮
无障碍效果
各读屏、各浏览器的支持效果
测试人：沈广荣
- 争渡、IE11：
- 样例1，名: 可编辑文本 ，
样例2，HTML 复选框 已选中 ，
样例3，巧克力 单选按钮 未选中 、奶油 单选按钮 未选中、蜜釉 单选按钮 未选中、购买 按下按钮
- 永德、IE11：
- 样例1，名: 可编辑文本 ，
样例2，HTML 复选框 已选中 ，
样例3，巧克力 单选按钮 未选中 、奶油 单选按钮 未选中、蜜釉 单选按钮 未选中、购买 按下按钮
- NVDA、IE11：
- 样例1，名: 编辑框 ，
样例2，HTML 复选框 已选中 ，
样例3，巧克力 单选按钮 未选中 、奶油 单选按钮 未选中、蜜釉 单选按钮 未选中、购买 按钮
- 永德、chrome：
- 样例1，名: 可编辑文本 ，
样例2，HTML 复选框 已选中 ，
样例3，巧克力 单选按钮 未选中 、奶油 单选按钮 未选中、蜜釉 单选按钮 未选中、购买 按下按钮 购买
- NVDA、chrome：
- 样例1，名: 编辑框 ，
样例2，HTML 复选框 已选中 ，
样例3，巧克力 单选按钮 未选中 、奶油 单选按钮 未选中、蜜釉 单选按钮 未选中、购买 按钮
- NVDA、Firefox：
- 样例1，名: 编辑框 ，
样例2，HTML 复选框 已选中 ，
样例3，巧克力 单选按钮 未选中 、奶油 单选按钮 未选中、蜜釉 单选按钮 未选中、购买 按钮
- voiceover、chrmoe：
- 样例1，名: 编辑文本 ，
样例2，HTML 复选框 ，
样例3，巧克力 单选按钮 、奶油 单选按钮 、蜜釉 单选按钮 、购买 按钮
- voiceover、Safari：
- 样例1，名: 编辑文本 ，
样例2，HTML 复选框 ，
样例3，巧克力 单选按钮 、奶油 单选按钮 、蜜釉 单选按钮 、购买 按钮
