浅谈<label>与<input>合作的两种方式

来源：互联网发布：剑灵外国人捏脸数据编辑：程序博客网时间：2024/06/14 03:39

<label>标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

1、通过为<input>设置id属性，在<lable>标签中设置for=id来让说明文本和对应的<input>关联起来。

[html] view plain copy
<label for="Name">Number:</label>  
<input type="text" id="Name"/>  

2、<label>包裹<input>标签，点击<label>，<label>响应两次，即<label>本身出发和<input>触发后冒泡到<label>。

[html] view plain copy
<body>  
    <label for="input">  
        <input id="input" type="text"/>label  
    </label>  
    <script>  
        var label = document.getElementsByTagName("label")[0];  
        var input = document.getElementById("input");  
        label.addEventListener("click", function() {  
                alert("label");  
        }, false);  
        input.addEventListener("click", function(e) {  
                alert("input");  
        }, false);  
    </script>  
</body>  

输出："label" "input" "label"。

阅读全文

0 0