自己动手-表单

最新推荐文章于 2025-05-30 08:15:27 发布

原创最新推荐文章于 2025-05-30 08:15:27 发布 · 93 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #XHTML #HTML #ViewUI

Javacript 专栏收录该内容

24 篇文章

订阅专栏

本文通过一个具体的HTML表单示例介绍了如何使用JavaScript进行表单元素的选择及操作，包括获取表单数据和对输入框样式进行动态调整。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	<script type="text/javascript">
	
	function test(){
		var loginForm=document.getElementById("loginForm");
		/*
		alert(loginForm.elements["username"].name);
		alert(loginForm.elements["username"].nodeType);
		alert(loginForm.elements["username"].value);
		*/
		
		/*alert(loginForm.elements[0].name);
		alert(loginForm.elements[0].nodeType);	
		alert(loginForm.elements[0].value);*/
		
/*		alert(loginForm.username.name);
		alert(loginForm.username.nodeType);	
		alert(loginForm.username.value);*/
		
		
/*		var buffer="";
		for(var i=0;i<loginForm.elements.length;i++){
			buffer+=loginForm.elements[i].name;
			buffer+="=";
			buffer+=loginForm.elements[i].value;
			buffer+=",";
		}*/
		var buffer="";
		for(var i=0;i<loginForm.elements.length;i++){
			buffer=buffer.concat(loginForm.elements[i].name);
			buffer=buffer.concat("=");
			buffer=buffer.concat(loginForm.elements[i].value);
			buffer=buffer.concat(",");
		}
		
		alert(buffer);	
		
		
	}
	function editInputTxtCssByFocus(){
		this.style.border="2px solid blue";
		}
	function editInputTxtCssByBlur(){
		this.style.border="2px solid green";
		}
		
		
	window.onload=function(){
			var loginForm=document.getElementById("loginForm");
			for(var i=0;i<loginForm.elements.length;i++){
				var e=loginForm.elements[i];
				e.onfocus=editInputTxtCssByFocus;
				e.onblur=editInputTxtCssByBlur;
			}
	}

		
	</script>
	<style type="text/csss">
		
	</style>
	</head>

	<body>
<form id="loginForm" name="loginForm" method="post" action="">
        <p>用户名: <br />
        <input name="username" type="text" id="username" value="macrotea" />
        <br />
        密码: <br />
        <input name="password" type="text" id="password" value="javaeye" />
        <br />
        密码确认: <br />
        <input name="_password" type="text" id="_password" value="javaeye" />
    </p>
        <p>
        <input type="submit" name="submit" id="submit" value="提交" />
        <input type="reset" name="reset" id="reset" value="重置" />
    </p>
    </form>
<input name="button" type="button" onclick="test();" value="测试"/>


</body>
</html>