form.elements[i]

原生js操作form的一些方法，来看下面写的这个demo,这个demo是展示了一下form.eleemnts[i]的意义和用法：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>form.elements</title>
 6 </head>
 7 <body>
 8     <div class="wrap">
 9         <form>
10             <p>
11                 <label for="username">
12                     用户名：
13                 </label>
14                 <input type="text" placeholder="请输入用户名">
15             </p>
16             <p>
17                 <label for="psw">
18                     密码：
19                 </label>
20                 <input type="text" placeholder="请输入密码">
21             </p>
22             <p><input type="submit" value="登录"></p>
23         </form>
24         <form>
25             <p>
26                 <label for="username">
27                     用户名：
28                 </label>
29                 <input type="text" placeholder="请输入用户名" value="xiaoming">
30             </p>
31             <p>
32                 <label for="psw">
33                     密码：
34                 </label>
35                 <input type="text" placeholder="请输入密码" value="123455">
36             </p>
37             <p>
38                 <label for="pswok">
39                     密码：
40                 </label>
41                 <input type="text" placeholder="请输入密码" value="123455">
42             </p>
43             <p><input type="submit" value="注册"></p>
44         </form>
45     </div>
46     <script>
47         window.onload = function(){
48             var form1 = window.document.forms[0];
49             var form2 = window.document.forms[1];
50             document.write("form1的长度："+form1.length+"------"+"form2的长度："+form2.length+"<br />");
51 
52             //需求：打印form2中所有input的value与input
53             for(var i=0; i<form2.length; i++){
54                 document.write(form2.elements[i].value);
55                 document.write("<br />");
56                 document.write(form2.elements[i].type);
57                 document.write("<br />");
58             }
59 
60             // 需求：循环遍历，如果input的type==text,则清空input的value值
61             for(var i=0; i<form2.length; i++){
62                 if(form2.elements[i].type == 'text'){
63                     form2.elements[i].value =''
64                 }
65             }
66         }
67     </script>
68 </body>
69 </html>

感兴趣的，多练习一下，就明白我们获取form的方法和form.elements[i]的意义了，希望这个demo对你有所帮助。