第二章网站开发基础之HTML教程 - 二、常用HTML标签：label（内联元素）

最新推荐文章于 2021-06-28 00:28:42 发布

陈子2005

最新推荐文章于 2021-06-28 00:28:42 发布

阅读量228

点赞数 1

分类专栏：陈子-零基础网站开发教程文章标签： html css javascript web html5

本文链接：https://blog.csdn.net/klyz505/article/details/105441723

版权

陈子-零基础网站开发教程专栏收录该内容

48 篇文章 2 订阅

订阅专栏

4.label（内联元素）

label基本只用于表单中提高用户的数据录入体验。
label的for属性，指定为某一个input的id值时，则两者会关联在一起：当鼠标点击label里的文字，浏览器就会自动将焦点聚到所关联的表单控件上。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>label标签</title>
</head><body>
第一组标签：
<input type="radio" name="r1">我是帅哥 &nbsp; <input type="radio" name="r1">我是美女<br>
第二组标签：
<input type="radio" name="r2" id="r2_1"><label for="r2_1">我是帅哥</label> &nbsp; 
<input type="radio" name="r2" id="r2_2"><label for="r2_2">我是美女</label>
</body>
</html>

效果如下：

（图2-37）

    在第一组标签里，如果要选中“我是帅哥”或“我是美女”前面的小圆圈（单选控件），那么鼠标必须点击小圆圈才可以。
    在第二组标签里，如果要选中“我是帅哥”或“我是美女”前面的小圆圈，只需要用鼠标点击“我是帅哥”或“我是美女”的文字。（鼠标点击小圆圈也可以实现选中）。
    从用户体验上来讲，第二组标签更加人性化，使用起来更加简便。