两个单选按钮
构建如下页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
男：<input type="radio" name="性别">
女：<input type="radio" name="性别">
</body>
</html>
效果如图
在网页中出现了两个单选按钮。点击圆形的区域才能选中。但是，圆形的区域太小了，鼠标想要点到有点困难，用户体验不好。使用 label 标签可以改善用户体验。
使用 label 标签
将页面改为如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<label for="男">男：</label>
<input type="radio" name="性别" id="男">
<label for="女">女：</label>
<input type="radio" name="性别" id="女">
</body>
</html>
此时网页没有什么外观上的变化
但是，体验大不相同。点击文字“男”或“女”也能将单选按钮选上。如下所示
label标签的效果
原理
通过设置 label 标签的 for 属性为想要绑定的 input 标签的 id ，这样，点击 label 标签的文字的时候也会触发单选按钮的点击事件，从而选中单选按钮。
2177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
