JavaScript遍歷表單元素


運行效果:

 

 

源代碼:

 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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM