前言
之前一直认为label元素没啥用处，外观看起来和普通文本元素没什么区别。所以在日常开发中，经常用span标签代替label标签。本文介绍使用label元素优化表单控件的样式。
一、什么是label标签
标签用于为表单控件定义标记。label元素与表单控件绑定的方式有两种：
- label元素将相关元素包裹起来。
- label元素的for属性设置为相关元素的id值。
使用label元素不会向用户呈现任何特殊的效果，和普通的文本外观上表现一样。但是，当用户点击标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<!--label元素的 for 属性设置为input元素的id值-->
<label for="age">年龄: </label>
<input id="age" type="text"/>
<br/>
<!--label元素将input的元素包裹起来-->
<label>
姓名:
<input id="name" type="text"/>
</label>
<br/>
<!--span元素将input的元素包裹起来-->
<span>性别: <input type="text" name="sex" /></span>
如下图所示，点击“姓名”、“年龄”两个label元素定义的标签时，相应的文本框自动获取到了焦点。而点击“性别”文本时，相应的文本框没有获取到焦点。
二、基于label元素优化表单控件的样式
通过隐藏表单控件的显示，在label元素中添加表单样式，点击label元素将焦点转到和相关的表单控件上。
1. 优化<input type="file">样式
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
#uploadfile{
display: none;
}
#upload-btn{
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
position: relative;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
}
#upload-btn::before{
position: absolute;
content: "";
width: 80px;
height: 1px;
border-bottom: 2px solid #8c939d;
left: 30%;
top: 50%;
}
#upload-btn::after{
position: absolute;
content: "";
width: 1px;
height: 80px;
border-right: 2px solid #8c939d;
left: 50%;
top: 30%;
}
</style>
</head>
<body>
<label for="uploadfile">
<div id="upload-btn" title="上传文件"></div>
</label>
<input type="file" id="uploadfile">
</body>
</html>
2. 优化<input type="radio">样式
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.radio{
display: none;
}
.radio-btn{
border: 1px solid #dcdfe6;
border-radius: 100%;
width: 14px;
height: 14px;
background-color: #fff;
position: relative;
cursor: pointer;
display: inline-block;
box-sizing: border-box;
vertical-align: middle;
}
input[type="radio"]:checked + label .radio-btn{
position: relative;
background-color: #409eff;
}
input[type="radio"]:checked + label .radio-btn::after{
content: "";
height: 4px;
width: 4px;
background: #fff;
border-radius: 100%;
display: inline-block;
position: absolute;
top: 4px;
left: 4px;
}
.radio-text{
vertical-align: middle;
}
input[type="radio"]:checked + label .radio-text{
color: #409eff;
}
</style>
</head>
<body>
<input type="radio" id="male" class="radio" name="sex" value="男" onchange="changeRadio(this)">
<label for="male">
<span class="radio-btn"></span>
<span class="radio-text">男</span>
</label>
<input type="radio" id="famale" class="radio" name="sex" value="女" onchange="changeRadio(this)">
<label for="famale">
<span class="radio-btn"></span>
<span class="radio-text">女</span>
</label>
<script>
</script>
</body>
</html>
总结
本文主要介绍了label标签的作用，label元素绑定相应的表单控件时，点击label标签，表单控件可以自动获取焦点。根据这一特性，我们可以将表单控件隐藏，然后再label元素中显示漂亮的表单控件样式。
