当前位置: 代码迷 >> Web前端 >> 自各儿动手-表单
  详细解决方案

自各儿动手-表单

热度:433   发布时间:2012-10-24 14:15:58.0
自己动手-表单
<!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>

 

?

  相关解决方案