前端学习——js操作form表单

最新推荐文章于 2025-06-11 21:11:49 发布

原创最新推荐文章于 2025-06-11 21:11:49 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

三大基础语言专栏收录该内容

145 篇文章

订阅专栏

本文介绍如何使用JavaScript操作HTML中的Form表单，包括通过ID和name属性获取表单对象、获取表单元素集合及表单的提交和重置等常见方法。同时探讨了如何动态改变表单的提交路径和提交方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			<!--
				js操作form
				 获取form表单对象
				     使用id方式：var fm=document.getElementById("fm");
				     使用name属性:var frm=document.frm;
				 获取form表单下的所有表单元素集合
				   fm.elements
				form表单的常用方法
				     form表单的提交：表单对象.submit();//提交表单数据
				 form表单的属性操作:
				           表单对象名.action="新的值";//动态的改变数据的提交路径
				    表单对象名.method="新的值";//动态的改变提交方式      
				 js表单元素的通用属性
				     只读模式：readonly="readonly"//不可更改，但提交数据
				     关闭模式：disabled="disabled" //不可以进行任何操作，不提交数据
				     作用：当你不同意本协议时，注册按钮灰，按不了。
				     
			-->
		<title>js操作form表单</title>
		<script type="text/javascript">
			function testfm(){
				//获取form表对象
				var fm=document.getElementById("fm");
				//alert(fm);
				//使用form表单的name属性值来获取
				var frm=document.frm;
				//alert(frm);
			//	alert(fm===frm);	
				//获取form表单元素集合
		         // alert(fm.elements.length);
		          //form表单的常用方法
		         // fm.submit();//用于注册或校验，判断对了再提交
		          //fm.reset();
		          //form的属性操作
		          fm.action="http://www.baidu.com/s"
		 	}
	
			
		</script>
	</head>
	
	<body>
		<h3>js操作form表单</h3>
		
		<input type="button" name="" id="" value="测试form表单" onclick="testfm()" /><hr />
		<form action="#" method="get" id="fm" name="frm">
			<b>用户名：</b><input type="text" name="wd" id="uname" value="" readonly="readonly"/><br />
			密码：<input type="password" name="pwd" id="pwd" value="" disabled="disabled" /><br />
			<input type="submit" value="登录"/>
		</form>
	</body>
</html>