关于 HTML <label> 标签的 for 属性的用法，和修改上传控件的样式

W3C中的定义和用法

　　for 属性规定 label 与哪个表单元素绑定。

<!--label标签for 属性规定 label 与哪个表单元素绑定。-->

        <label for="male">Male</label>
        <input type="radio" name="sex" id="male" />
        <br />
        <label for="female">Female</label>
        <input type="radio" name="sex" id="female" />

label的for属性绑定效果

　　这种情况下，点击   “关联按钮”   就会触发input的点击事件getA（）,从而弹出  ‘ok’  。

　　　　 <input id="btnA" οnclick="getA()" hidden="hidden" />
        <label for="btnA">
            <span>关联按钮</span>
        </label>
        <script>
            function getA() {
                alert('ok');
            }
        </script>

 

我第一次是用在了修改上传控件的样式上，感觉效果很好

　　用Label的for属性绑定表单控件input，然后隐藏掉上传控件，用label中的一张图片代替上传控件，这时候，点击图片，就相当于点击了上传控件

<!--图片上传并即时显示-->
        <input type="file" class="imgInput" id="imgUp" multiple="multiple" style="width: 0px;" />
        <!--用for属性绑定file控件-->
        <label for="imgUp">
            <img src="/file/sys.png" alt="" width="100" />
        </label>
        <div id="xs"></div>
        <div id="imgInfo"></div>
        <script>
            $(".imgInput").change(function () {
                //清空上一次选中的图片信息
                $("#xs").empty();
                $("#imgInfo").empty();
                //获取文件上传域内输入的多个文件
                var fileList = this.files;
                //遍历每个文件
                for (var i = 0; i < fileList.length; i++) {
                    //展示上传图片
                    var ImgControls = new Image();
                    ImgControls.className = "img" + i;
                    ImgControls.width = 100;
                    document.getElementById("xs").appendChild(ImgControls);
                    $(".img" + i + "").attr("src", URL.createObjectURL($(this)[0].files[i]));
                    //展示上传文件的信息
                    var file = fileList[i];
                    div = document.getElementById("imgInfo");
                    div.innerHTML += "第" + (i + 1) + "个文件&nbsp;文件名：" + file.name + "&nbsp;文件类型:" + file.type + "&nbsp;文件大小:" + file.size + "<br/>";
                }
            });
        </script>

转载于:https://www.cnblogs.com/Autumn-wind-leaves/p/9929333.html