zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    莫比乌斯反演套路一--令t=pd--BZOJ2820: YY的GCD
    BZOJ2720: [Violet 5]列队春游
    BZOJ2277: [Poi2011]Strongbox
    莫(meng)比(bi)乌斯反演--BZOJ2301: [HAOI2011]Problem b
    「CodePlus 2017 11 月赛」Yazid 的新生舞会
    「CodePlus 2017 11 月赛」大吉大利,晚上吃鸡!
    用NumGo实现安卓动画
    人生
    用NumGo实现安卓动画
    html5使用canvas绘制n角星
  • 原文地址:https://www.cnblogs.com/yijiahao/p/11909514.html
Copyright © 2011-2022 走看看