JavaScript遍历表单元素

自作多情 提交于 2019-12-05 06:04:55

运行效果:

 

 

源代码:

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单</title>
 6 </head>
 7 <body>
 8     <form name="myForm">
 9         <table>
10             <tr>
11                 <td width="53%">
12                     <label for="fullName">姓名:</label><input id="fullName" type="text" name="fullName" size="20"><br />
13                     <label for="passWord">密码:</label><input id="passWord" type="password" name="passWord" size="20"></td>
14                 <td width="47%">性别:
15                     <input id="male" type="radio" name="gender" value="男" checked><label for="male">男</label>&nbsp;
16                     <input id="female" type="radio" name="gender" value="女"><label for="female">女</label>
17                 </td>
18             </tr>
19             <tr>
20                 <td width="53%">爱好:
21                     <input id="music" type="checkbox" name="music" value="ON"><label for="music">音乐</label>&nbsp;
22                     <input id="sports" type="checkbox" name="sport" value="ON"><label for="sports">运动</label>
23                 </td>
24                 <td width="47%"><label for="education">学历:</label>
25                     <select id="education" size="1" name="edu_level">
26                         <option>小学</option>
27                         <option>中学</option>
28                         <option selected>大学</option>
29                         <option>大学以上</option>
30                     </select>
31                 </td>
32             </tr>
33             <tr>
34                 <td width="100%" colspan="2"><label for="remark">自我介绍:</label><br/><textarea id="remark" rows="3" name="remark" cols="50"></textarea></td>
35             </tr>
36             <tr>
37                 <td align="center"><input type="submit" value="提交" name="submit_button"></td>
38                 <td>
39                     <button type="reset" name="reset_button">重置</button>
40                 </td>
41             </tr>
42         </table>
43     </form>
44     <hr/>
45     <script type="text/javascript">
46         var myform, element, i;
47         myform = document.myForm;
48         document.write("<h3>表单中有" + myform.length + "个元素:</h3>");
49         for (i = 0; i < myform.length; i++) {
50             element = myform.elements[i];
51             if (i > 0) document.write(",");
52             document.write(element.name);
53         }
54     </script>
55 
56 </body>
57 </html>

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!