关于label标签的做用

label标签的定义和用法：

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。若是您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

　　　　　　　　　　　　　　　　——W3school的解释

常常见到这样的表单元素，好比：点击一张图片能够从新更换图片，或者点击下图所示的复选框

    

以前个人作法是写一个input标签，设置type为file或者checkbox，设置大小为想要的大小，而后把想要的效果好比上图所示或者一个图片，放在input标签的下面，使input标签恰好能够覆盖住图片，

最后把input设置成visibility：hidden，因此此时点击的虽然是图片，可是实际上点击的是input框，这样形成的假象就是点击图片实现上传更新。（这样的实现是挺蠢的OTZ）

后来偶然了解到label标签的做用，才知道label元素和对应id的input元素是互相绑定的，也就是说点击label就至关于点击了input，那这样就好办了，就不须要营造假象了

因此如今代码能够这么写：

（1）复选框样式：

主要HTML代码：

<label class="demo"> 
    <input type="checkbox" name="">
    <i class="fa fa-check icon-selected"></i>
    <em>多选框1</em>
</label>

主要CSS代码：

input{ display: none;
} input:checked~em{ color: #c6636c; border:1px solid #c6636c;
}

选中以前的样式和选中以后的样式

 

这样的用法就显得高级多啦

（2）上传图片样式：

HTML代码：

<label class="demo"> 
    <p>点击上传图片</p>
    <input type="file" name="">
    <em></em>
</label>

CSS代码：

input{ display: none;
} em{ display: inline-block; width: 175px; height: 173px; background: url(./add.png);
}

点击下图所示的图片以后，即可以调用file文件实现图片的选择和上传，以后在进行其余操做

 

by 新手小白的记录