web前端练习8----html中label标签的使用

最新推荐文章于 2025-06-15 22:53:09 发布

原创最新推荐文章于 2025-06-15 22:53:09 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

web前端2018 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了HTML的label标签的使用，它在页面中虽然不直接显示效果，但能将事件绑定到相关元素，如用于文件上传、单选框和多选框。通过for属性与元素ID绑定，增强用户体验。提供了代码示例和参考资料链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

label 元素不会向用户呈现任何特殊效果
label把事件转移到相关元素上面
for 属性规定 label 与那个元素绑定绑定事件
1结合上传文件的元素使用

         <div class="buju1">
             <!--label把事件转移到相关蒜素上面-->
             <label class="buju2" for="iii"><img id="img1" class="imgtubiao" src="img/addimg.jpg"> </label>
             <input class="myinput" type="file" name="pic" onchange="fileUpload(this)" id="iii">
         </div>

2结合单选框 for属性个和相对应的id绑定

<div class="buju3">

             <label for="male">男</label>
             <input type="radio" name="sex" id="male" />
             <br />
             <label for="female">女</label>
             <input type="radio" name="sex" id="female" />
         </div>

3结合多选框

 <div class="buju4">
             <label for="pg">苹果</label>
             <input type="checkbox" name="shuiguo" id="pg"  />
             <br />
             <label for="xj">香蕉</label>
             <input type="checkbox" name="shuiguo" id="xj" />
         </div>

效果图：
在这里插入图片描述
完整代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!-- 本周练习label，周末写博客-->
    <!-- 适配手机-->
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
    <title></title>

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .buju2{
            display: block;
            position: relative;
            top: 0px;
            left: 0px;
        }
        .myinput{
            width: 60px;
            height: 60px;
            position: absolute;
            opacity: 0;
            background-color: cornflowerblue;
        }
        .imgtubiao{
            width: 60px;
            height: 60px;
            position: absolute;
        }
        .buju3{
            height: 100px;
            width: 100px;
            background-color: cornflowerblue;
            position: relative;
            top: 60px;
            left: 0px;
        }
        .buju4{
            height: 100px;
            width: 100px;
            background-color: yellow;
            position: relative;
            top: 60px;
            left: 0px;
        }
    </style>

</head>
<body>
          <!-- label 元素不会向用户呈现任何特殊效果-->
          <!-- label把事件转移到相关元素上面-->
          <!-- for 属性规定 label 与那个元素绑定绑定事件-->
          <!-- 结合上传文件的元素使用-->
         <div class="buju1">
             <!--label把事件转移到相关蒜素上面-->
             <label class="buju2" for="iii"><img id="img1" class="imgtubiao" src="img/addimg.jpg"> </label>
             <input class="myinput" type="file" name="pic" onchange="fileUpload(this)" id="iii">
         </div>

         <!-- 结合单选框 for属性个和相对应的id绑定-->
         <div class="buju3">

             <label for="male">男</label>
             <input type="radio" name="sex" id="male" />
             <br />
             <label for="female">女</label>
             <input type="radio" name="sex" id="female" />
         </div>

         <!-- 结合多选框-->
         <div class="buju4">
             <label for="pg">苹果</label>
             <input type="checkbox" name="shuiguo" id="pg"  />
             <br />
             <label for="xj">香蕉</label>
             <input type="checkbox" name="shuiguo" id="xj" />
         </div>


        <script>
//            拿到选择的图片，显示出来
            function fileUpload(f) {
                var rd = new FileReader();//创建文件读取对象
                var files = f.files[0];//获取file组件中的文件
                rd.readAsDataURL(files);//文件读取装换为base64类型
                rd.onloadend = function (e) {
                    //加载完毕之后获取结果赋值给img
                    document.getElementById("img1").src = rd.result;
                    console.log(this.result);
                }
            }
        </script>
</body>
</html>

源码下载：
lianxi2----…----Label.html
https://download.youkuaiyun.com/download/zhaihaohao1/10839403

参考文章
http://www.w3school.com.cn/tags/tag_label.asp