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>
<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">
如果有什么问题,欢迎评论区探讨呀!