label标签深入理解

介绍

1 .label标签为input元素定义标记，不会向用户呈现任何特殊效果，但是为鼠标用户改进了可用性，可以关联特定表单控件
2 .label标签和特定表单控件关联之后，如果用户在lebel元素内点击文本，就会触发关联的表单控件。也就是说当用户选择改标签的时候，浏览器就会自动将焦点转到label相关的表单控件上.

使用场景1

1 .和checkbox，radio相关联,实现点击文字也能取消，选中radio,checkbox.现在点击汉字就能选中标签

<input type="radio" id="man">
   <label for="man">男</label>
   <input type="radio" id="woman">
   <label for="woman">女</label>
   
    <input type="checkbox" name="1" id="1">
    <label for="1">1</label>

    <input type="checkbox" name="2" id="2">
    <label for="2">2</label>

 <input type="input" id="input">
   <label for="input">姓名</label>
//点击姓名，选中输入框

2 .隐式关联:这中chrome好像不行

<label for="">男
       <input type="checkbox" name="man" id="man">
</label>

<label for="input">姓名
    <input type="input" id="input">
   </label>
//这样是可以的

隐式关联的优缺点

1 .优点

1 .控件不需要定义id
2 .标签和控件方便作为一个整体控制

2 .缺点

1 .增加了标签嵌套层数
2 .不能将标签和关联控件放到不同的位置

显示关联的优缺点

1 .优点

1 .可以减少嵌套标签层数
2 .label和表单可以再不同的位置

2 .缺点

1 .空间需要定义id
2 .label标签和表单空间不利于作为一个整体控制

label标签的浏览器支持可关联的表单元素

1 .type=text
2 .checbbox
3 .radio
4 .file
5 .password
6 .textarea
7 .select

lable可以关联其他的html元素

1 .button

button{
               position:absolute;
               clip:rect(0 0 0 0)
           }
           label{
               display: inline-block;
               line-height: 20px;
               padding: 10px;
           }

<button id="btn"></button>
   <label for="btn">
       按钮
   </label>