javascript form 第22节 

<html>
<head>
	<title>Form对象</title>
	 
	</style>
	<script type="text/javascript">
	      function showForm() {
             // var oForm = document.forms[0];
			  //var oForm = document.forms['form1'];
			   var oForm = document.form1;

			  alert(oForm.action);
              //oForm.action = "内置对象.htm";
		  }

		  function showEle() {
                 var oForm = document.form1;
				 var a = oForm.elements;
				 var msg = "";
				 for(var i = 0; i < a.length; i++ ) {
                     msg += a[i].name +  " = > "+  a[i].value + "\n";

				 }
				 alert(msg);
		  }
	
	</script>	
	</head>
	<body>
		<div>表单对象</div>
		1.Form对象</br>
			<script type="text/javascript">
			    //return false 阻止对象的默认事件
			</script>
			 <form  action="javascriptDemo.htm" method="GET" name="form1" onsubmit="alert('你想提交吗'); return false;"    onreset="alert('确定重填')">
			 <table border="1" width="500px" cellpadding="5" cellspacing="0" align="left">
				 <tr>
					 <th colspan="2">学员注册表</th>
				 </tr>	     
				  <tr>
					 <td align="right">姓名:</td><td><input type="text" name="username" /></td>
				 </tr>
				  <tr>
					 <td align="right">密码:</td><td><input type="password" name="password"/></td>
				 </tr>

				 <tr>
					 <td align="right">性别:</td>
					 <td>
						 <input type="radio" name="sex" value='男' checked="checked"/>男
						 <input type="radio" name="sex" value='女'/>女
					 </td>
				 </tr>

				  <tr>
					 <td align="right">爱好:</td>
					 <td>
						 <input type="checkbox" name="loves" value='足球' checked="checked"/>足球
						 <input type="checkbox" name="loves" value='看书' />看书
						 <input type="checkbox" name="loves" value='旅游' />旅游
						 <input type="checkbox" name="loves" value='游戏' />游戏
					 </td>
				 </tr>

				  <tr>
					 <td align="right">班级:</td>
					 <td>
						<select name="clazz">
							<option value="clazz1">clazz1</option>
							<option value="clazz2" selected="seleted">clazz2</option>
							<option value="clazz3">clazz3</option>
							<option value="clazz4">clazz4</option>
						</select>
					 </td>
				 </tr>

				 <tr>
					 <td align="right">照片:</td>
					 <td>
						<input type="file" name="photo" size="40"/>
					 </td>
				 </tr>

				 <tr>
					 <td align="right">个人简历:</td>
					 <td>
						<textarea rows="6" cols="40" name="intro">请输入....
						</textarea>
					 </td>
				 </tr>

				 <tr>			
					 <td colspan="2" align="center">
						 <input type="submit" value="登陆"/>
						 <input type="reset" value="重填"/>
						 
						 <input type="hidden" name="hidden" value="yfs" />
					 </td>
				 </tr>
			 </table>
		   </form></br>

		2.Form对象</br>
			<input type="button" value="获取表单" onclick="showForm()"/>
			<input type="button" value="获取表单元素" onclick="showEle()"/>

			<input type="button" value="提交表单" onclick="document.form1.submit()"/>
			<input type="button" value="重置表单" onclick="document.form1.reset()"/>

</body>
</html>

 rs:

posted @ 2015-08-20 13:33  影分身  阅读(128)  评论(0)    收藏  举报