html5 - 使用labels属性有什么优势吗？-PHP中文网问答

第一个为使用labels属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>labels属性</title>
    <script>
        function Validate(){
            var txtName=document.getElementById("txt_name");
            if(txtName.value.trim()==""){
                txtName.labels[2].innerHTML="Please input your name";
                txtName.labels[2].setAttribute("style","font-size:9px;color:red")
            }
        }
    </script>
</head>
<body>
    <form id="testform">
        <label id="label" for="txt_name">name:</label>
        <input id="txt_name">
        <label for="txt_name"></label>
        <input type="button" id="btnValidate" value="验证" onclick="Validate()">
    </form>
</body>
</html>

第二个为使用id处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>labels属性</title>
    <script>
        function Validate(){
            var txtName=document.getElementById("txt_name");
            if(txtName.value.trim()==""){
                txtName.labels[2].innerHTML="Please input your name";
                txtName.labels[2].setAttribute("style","font-size:9px;color:red")
            }
        }
    </script>
</head>
<body>
    <form id="testform">
        <label id="label" for="txt_name">name:</label>
        <input id="txt_name">
        <label id="label2"></label>
        <input type="button" id="btnValidate" value="验证" onclick="Validate()">
    </form>
</body>
</html>

两者使用效果都相同，出表达方式以外不知道是否存在其它不同？

全部回复(2)

PHP中文网2017-04-17 13:46:16 2楼

label没啥特殊，关键是label 的for属性比较好，给个W3SCHOOL的地址，你不管点击小圆点还是文字，都可以选中，这个就是for属性的好处，不用JS去写了，其他貌似没啥意思

赞 +0

添加回复

黄舟2017-04-17 13:46:16 1楼

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<form>
  <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" />
</form>

点击Male文字或者Female文字就会选中。