第一个为使用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>
两者使用效果都相同,出表达方式以外不知道是否存在其它不同?
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文字就会选中。
label没啥特殊,关键是label 的for属性比较好,给个W3SCHOOL的地址,你不管点击小圆点还是文字,都可以选中,这个就是for属性的好处,不用JS去写了,其他貌似没啥意思