表单中的label标签

label标签:

1.label标签的作用

首先我们看一组代码：

性别:男<input type="radio" value="男" name="gender"> 女<input type="radio" value="女" name="gender"> 

这是我们昨天写的代码，运行结果：

然后我们再加上label标签：

性别:<input type="radio" value="男" name="gender" id="nan"> <label for="nan">男</label>
     <input type="radio" value="女" name="gender" id="nv"> <label for="nv">女</label>

这是我们改进之后的代码，运行结果：

**欸~，这不是没区别吗？**别着急，仔细看一下，我们就会发现在加入label标签之前，我们的运行结果中鼠标点在这个"男"或者"女"的汉字上是没有效果的。但是加入label标签之后，我们点击了汉字之后效果和点到了按钮键是一样的。

同样的，其他type属性也可以：

<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="请输入用户名"><br>
<label for="password">密码:</label>
&nbsp;&nbsp;&nbsp;<input type="password" id="password" name="password" placeholder="请输入密码">

运行结果：

可以看到，我们的代码让用户的体验变得更好了！

2.label标签的语法：

性别:
<label for="nan">男</label> <!--这里的label里面的for属性规定了一个值-->
<!--label标签是个双标签，双标签中间的值就是可以用来代替按钮的文本-->
<input type="radio" value="男" name="gender" id="nan"> <!--将上面的for属性规定的值添加到这里的id属性中就大功告成了！-->
<label for="nv">女</label>	
<input type="radio" value="女" name="gender" id="nv"> 
    

如果有什么问题，欢迎评论区探讨呀！