HTML5表单form属性？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form id="fr"></form>
		
		<label for="text_name" form="fr">labels属性：</label>
		<input type="text" id="text_name" form="fr" />
		<input type="button" id="butt" value="验证" form="fr" onclick="labelsyz()"/>
		
		<script>
		function labelsyz(){
			var textt = document.getElementById("text_name");
			var but = document.getElementById("butt");
			var frr = document.getElementById("fr");
			if(textt.value == ""){
				var tet = document.createElement("label");
				tet.setAttribute("for","text_name");
				frr.insertBefore(tet,but);
				textt.labels[1].innerHTML="请输入姓名";
				textt.labels[1].style.color="red";
			}
		}
		</script>
	</body>
</html>

如上代码所示，我将表单元素放在form表单外面了，但是用了form=“”属性指定了从属关系，但是表单元素里的Onclick点击事件无法用，如果写到<form></form>内就可以用了，请问这是为什么呢？

续写不尽的未来3319689

浏览 1396回答 3

3回答

慕侠8885196

已改：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form id="fr"></form> <label for="text_name" form="fr">labels属性：</label> <input type="text" id="text_name" form="fr" /> <input type="button" id="butt" value="验证" form="fr" onclick="labelsyz()"/> <script> function labelsyz(){ var textt = document.getElementById("text_name"); var but = document.getElementById("butt"); var frr = document.getElementById("fr"); if(textt.value == ""){ var tet = document.createElement("label"); tet.setAttribute("for","text_name"); frr.insertBefore(tet,frr.but); textt.labels[1].innerHTML="请输入姓名"; textt.labels[1].style.color="red"; } } </script> </body></html>

蜂之谷

肯定可以响应点击事件的，只是你放到外面就不能那么写了 frr.insertBefore(tet,but); 这里会报错的

田心枫

Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

随时随地看视频慕课网APP