label标签

最新推荐文章于 2024-04-28 17:33:36 发布

爱吃火锅的小boy

最新推荐文章于 2024-04-28 17:33:36 发布

阅读量1.5w

点赞数 16

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_42900834/article/details/122528271

版权

1.<label>标签为input元素定义标注（标签）

2.<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

语法：

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

核心：

<label >标签的for属性应当与相关元素的id属性相同

<!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>label标签</title>
</head>

<body>
          <label for="text">用户名:</label>   <input type="text"  id="text">    
</body>

</html>

运行效果：

当鼠标点击方框（或者图片）中的任何位置时，都可以输入信息。

3.选定单选按钮

<!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>label标签</title>
</head>

<body>
          <label for="text">用户名:</label>   <input type="text"  id="text">    
          <input type="radio" id="nan" name="sex">  <label for="nan">男</label>
          <input type="radio" id="nv   name="sex">    <label for="nv">女</label>
</body>

</html>

运行效果：

爱吃火锅的小boy

关注

16
点赞
踩
48

收藏

觉得还不错? 一键收藏
0
评论
label标签

1.<label>标签为input元素定义标注（标签）2.<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。语法：<label for="sex">男</label><input type="radio" name="sex" id="sex" />核心：<label >标签的for属性应当与相关元素
复制链接

扫一扫