html label标签 for属性

最新推荐文章于 2025-03-16 17:37:05 发布

原创最新推荐文章于 2025-03-16 17:37:05 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#label for

html+css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了HTML中使用label和radio input元素实现性别选择的方法。通过设置label的for属性与radio input的id属性对应，可以使得点击label时选中相应的radio选项。

表现形式:
  <label for="boy">男</label>
  <input type="radio" name="sex" id="boy" />
  <label for="girl">女</label>
  <input type="radio" name="sex" id="girl" />

作用：
当点击  男 的时候，会选中 男的radio
当点击  女 的时候，会选中 女的radio

原理：
label中的for和input中的id是相互对应的

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
</head>

<body>

  <label for="boy">男</label>
  <input type="radio" name="sex" id="boy" />
  <label for="girl">女</label>
  <input type="radio" name="sex" id="girl" />

</body>


</html>