JavaScript 遍历 from 表单所有控件
Posted 知其黑、受其白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 遍历 from 表单所有控件相关的知识，希望对你有一定的参考价值。
阅读目录
javascript 遍历 from 表单所有控件 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<style type="text/css">
/* inputbackground: green
input[type=submit]
background: orange
*/
</style>
</head>
<body>
<form action="#" method="post" name="form01">
<p>昵称：<input type="text" name="username"></p>
<p>密码：<input type="password" name="password"></p>
<p><input type="submit" value="提交"></p>
</form>
<script type="text/javascript">
function getFele()
var fele=form01.elements;
// alert(fele.length)
for(var i=0;i<fele.length;i++)
var e=fele[i];
if (e.type=='submit')
e.style.background='orange'
else if(e.type=='password')
e.style.background='rgb(232, 240, 254)'
else
e.style.background='green'
getFele()
</script>
</body>
</html>
源码解析
1、获取 form 表单里面的的所有元素：
通过 formelement.elements，这里 form 元素通过 name 属性直接定位。
var fele=form01.elements;
2、循环遍历获取特定的元素：通过 elements[i] 的形式
前两步即可遍历表单所有控件
var e=fele[i];
3、判断一个控件的类型是不是 type：通过 element.type
if (e.type=='submit')
JavaScript 访问表单（四种方法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<style type="text/css">
form
width: 300px;
height: 150px;
background: green;
margin:25px;
</style>
</head>
<body>
<form action="" name="myform1">表单1</form>
<form action="" name="myform2">表单2</form>
<form action="" name="myform3">表单3</form>
<form action="" name="myform4">表单4</form>
<script type="text/javascript">
//访问表单的的方式1
document.getElementsByTagName('form')[0].style.background='red';
//访问表单的的方式2
// alert(document.forms.length)
document.forms[1].style.background='orange';
//访问表单的的方式3
document.forms['myform3'].style.background='blue';
//访问表单的的方式4
//不推荐使用，因为页面中表单较多的情况下容易出现相同name
myform4.style.background='pink'
</script>
</body>
</html>
源码解析
1、访问表单的的方式1：document 的 getElement 方式
document.getElementsByTagName('form')[0].style.background='red';
2、访问表单的的方式2：document 的 forms 属性
// alert(document.forms.length)
document.forms[1].style.background='orange';
3、访问表单的的方式3：documen t的 forms 属性加 form 的 name 属性精确定位
document.forms['myform3'].style.background='blue';
4、访问表单的的方式4：form 的 name 属性精确定位
//不推荐使用，因为页面中表单较多的情况下容易出现相同 name
myform4.style.background='pink'
以上是关于JavaScript 遍历 from 表单所有控件的主要内容，如果未能解决你的问题，请参考以下文章