label标签和特定表单控件关联之后,如果用户在 label 元素内点击文本,就会触发关联的表单控件。就是说,当用户选择该label标签时,浏览器就会自动将焦点转到和label标签相关的表单控件上。
label标签常用于与checkbox或radio关联,以实现点击文字也能选中/取消checkbox或radio。
label标签的关联方式主要有两种,显示关联和隐式关联:
显示关联:
显式关联是通过label标签的for属性,显式与另一个表单控件关联。需要注意的是,for属性的值必须是与label标签在同一文档中的可标记表单元素的id,注意是id而不是name。如:
<input type="checkbox" id="test"/> <label for="test">选项</label>
隐式关联:
隐式关联是直接将表单控件放到label标签内,这种情况下,label标签只能包含一个表单元素,包含多个只对第一个有效。如下:
<label>请选择:<input type="checkbox"></label>