欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HMTL label标签

程序员文章站 2022-03-28 19:13:47
label标签和特定表单控件关联之后,如果用户在 label 元素内点击文本,就会触发关联的表单控件。就是说,当用户选择该label标签时,浏览器就会自动将焦点转到和label标签相关的表单控件上。 label标签常用于与checkbox或radio关联,以实现点击文字也能选中/取消checkbox ......

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>