一 <label>标签及for属性
Label对象
表示一个HTML<keygen>元素
访问Label对象
使用getElementById()来访问<label>元素
var x=document.getElementById("myLabel");
创建Label对象
var x=document.createElement("LABEL");
Label对象属性
control 描述:返回标注的控件
form 描述:返回一个包含Label的表单的引用
htmlFor 描述:设置或返回label的for属性的值
label的for属性总结
1.定义:for属性规定label与哪个表单元素绑定。
<label>是专门为<input>元素服务的,为其定义标记;
label和表单控件绑定方式有两种:
方法一:将表单控件作为label的内容,这种就是隐士绑定
此时,不需要for属性,绑定的控件也不需要id属性
隐士绑定:
<label>Date of Birth:<input type="text" name="DofB" /></label>
方法二:为label标签下的for属性命名一个目标表单的id,这种就是显示绑定。
显式绑定:
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />
二、为什么要给label上面加上for属性
给 label 加了 for 属性绑定了input控件后,可以提高鼠标用户的用户体检。
如果在label 元素内点击文本,就会触发此控件,也就是说,当用户渲染该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
Label htmlFor 属性
返回 label 的 for 属性的值:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<label id="myLabel" for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
</form>
<p>点击“尝试一下”按钮返回 label 的 for 属性的值。</p>
<p id="demo"></p>
<button οnclick="myFunction()">尝试一下</button>
<script>
function myFunction(){
var x = document.getElementById("myLabel").htmlFor;
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
定义和用法
htmlFor 属性设置或返回 lable 的 for 属性的值。
for 属性指定 labe