DOM访问表单控件常用属性和方法

最新推荐文章于 2022-07-20 19:50:47 发布

原创最新推荐文章于 2022-07-20 19:50:47 发布 · 481 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#控件 #表单 #dom #javascript #id

本文介绍如何使用JavaScript操作HTML表单及表单内的元素，包括通过document.forms获取表单对象，利用表单对象进行表单重置等操作，并演示了如何通过getElementById和elements属性获取表单内特定元素。

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

document.forms 可以获取表单数组

<html>
	<head>
		<title>00</title>
		<script type="text/javascript" charset="utf-8">
			
			function operatorForm(){
				var myform=document.forms[0];
				//alert(myform.action);
				//alert(myform.method);
				//alert(myform.target);
				
				//myform.submit();
				myform.reset();
				
			}
			
		
		</script>
	</head>
	<body>
		
		<form id="myform" action="http://www.baidu.com" method="get" target="_self">
			<input name="username" type="text" value="chenhao"/><br/>
			<input name="password" type="text" value="123456"/><br/>
			<select name="city">
				<option value="shanghai">上海</option>
				<option value="nanjing" selected="selected">南京</option>
			</select><br/>
			<input type="button" value="获取表单内第一个控件"
				onclick="alert(document.getElementById('myform').elements[0].value)"/>
			<input type="button" value="获取表单内第二个控件"
				onclick="alert(document.getElementById('myform').elements['password'].value)"/>
			<input type="button" value="获取表单内第三个控件"
				onclick="alert(document.getElementById('myform').city.value)"/>
			<input type="button" value="操作表单"
				onclick="operatorForm()"/>
		</form>
	
	</body>

</html>