运行效果：

源代码：

 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>

JavaScript遍历表单元素的更多相关文章

  1. js如何遍历表单所有控件

    js如何遍历表单所有控件 一.总结 一句话总结: 1.获取form表单里面的的所有元素:通过formelement.elements,这里form元素通过name属性直接定位 var fele=for ...

  2. javascript遍历表

    定义表结构 1. 通过id遍历 <html> <body> <table id="tb" border="1"> <t ...

  3. element-ui做表单验证 v-for遍历表单 自动生成校验规则 pc移动双适配

    整体思路: 1:利用element-ui的栅格实现小分辨率和大分辨率的适配 2:模拟一组数据,从中筛选出 绑定各个表单值的对象   以及生成验证规则对象 3:在script标签内 .data()外,自 ...

  4. javascript 提取表单元素生成用于提交的对象（序列化 html 表单）

    function serialize(f) { var o = {}; var s = f.getElementsByTagName("select"); for (var i = ...

  5. Jquery 遍历表单 AJAX提交

    function test(){ var arrayObj = new Array(); $("#contentTable tbody tr").each(function(){ ...

  6. javascript实现的动态添加表单元素input,button等(appendChild)

    写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 代码如 ...

  7. JavaScript 学习（2）表单元素

    ##JavaScript 学习-2 1. 表单和表单元素 1.1 form对象 form对象的引用:document.forms[0]或者引用name属性,如:document.forms[" ...

  8. JavaScript之控制表单元素的值

    表单元素.value 获取表单元素的值 表单元素.value='这是修改后的值' 修改表单元素的值 案例: (1)html <input type="text" id=&qu ...

  9. JavaScript 客户端JavaScript之Document对象中的表单和表单元素

    Form对象 代表一个HTML表单(document可以有多个表单元素) 表单访问 document.form[document.forms.length-1] 访问表单元素 document.for ...

随机推荐

  1. Wireshark抓包工具解析HTTPS包

    目录 一.遇到的问题 二.解决方案 1. 动态生成签名证书 2. Wireshark配置 3. 最终效果 一.遇到的问题 本学期的计算机网络课程需要使用到Wireshark抓包工具进行网络抓包实验,原 ...

  2. golang 中 channel 的详细使用、使用注意事项及死锁分析

    目录 1.什么是 channel,介绍管道 2.channel 的基本使用 3.channel 的使用场景 4.使用 channel的注意事项及死锁分析 什么是 channel 管道 它是一个数据管道 ...

  3. CF578D题解

    LCS 为给定串的长度减一,考虑枚举一个区间 \([L,R]\),表示 \(S\) 和 \(T\) 的长度为 \(L-1\) 的前缀完全相同以及长度为 \(n-R\) 的后缀完全相同,且没有比这个前缀 ...

  4. 张高兴的 Entity Framework Core 即学即用：（一）创建第一个 EF Core 应用

    写在前面 Entity Framework Core (EF Core) 是 .NET 平台流行的对象关系映射(ORM)框架.虽然 .NET 平台中 ORM 框架有很多,比如 Dapper.NHibe ...

  5. java-计算机

    计算机 硬件 装机:CPU 内存 主板 IO设备(input output) 冯诺依曼体系结构 CPU读取数据在运算器中运算传输到存储器,控制器控制输出结果. 软件

  6. Pulsar 也会重复消费?

    背景 许久没有分享 Java 相关的问题排查了,最近帮同事一起排查了一个问题: 在使用 Pulsar 消费时,发生了同一条消息反复消费的情况. 排查 当他告诉我这个现象的时候我就持怀疑态度,根据之前使 ...

  7. winform 学习之qq邮箱正则验证及常用正则

    这段时间一直再做winform相关的项目,记录了一些东西 qq邮箱正则表达式: 第一种:字母和数字组合邮箱判断 string str = "justin1107@qq.com"; ...

  8. 关于MVC WebAPI 中加入任务调度功能的问题 （MVC WebAPI 任务调度）

    在MVC WebAPI中加入任务调度功能.即在MVC WebAPI启动时,启用任务调度程序. 但是这里有一个问题点,就是部署好IIS站点后,发现任务调度并没有启用.原因为何? 原因是部署好IIS站点后 ...

  9. 浅析MySQL恶意服务器读取文件原理

    前言 注:本文不涉及对MySQL协议报文研究,仅讲解原理,并且做部分演示. 搭建MySQL恶意服务器读取文件这件事,虽然直接利用门槛较高,但是由于在网上看到了一种比较新颖的利用方式(利用社会工程学引诱 ...

  10. 学习廖雪峰的Git教程3--从远程库克隆以及分支管理

    一.远程库克隆 这个就比较简单了, git clone git@github.com:****/Cyber-security.git 远程库的地址可以在仓库里一个clone or download的绿 ...