中科白癜风医院践行公益事业 http://www.txbyjgh.com/axhd/m/1975.html今天跟着中软卓越广州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下拉框，点击标签时，下拉框获得焦点，不过并不展开下拉框选项。
转载请注明：http://www.aierlanlan.com/grrz/7654.html
