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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>form.elements</title>

 </head>

 <body>

     <div class="wrap">

         <form>

             <p>

                 <label for="username">

                     用户名：

                 </label>

                 <input type="text" placeholder="请输入用户名">

             </p>

             <p>

                 <label for="psw">

                     密码：

                 </label>

                 <input type="text" placeholder="请输入密码">

             </p>

             <p><input type="submit" value="登录"></p>

         </form>

         <form>

             <p>

                 <label for="username">

                     用户名：

                 </label>

                 <input type="text" placeholder="请输入用户名" value="xiaoming">

             </p>

             <p>

                 <label for="psw">

                     密码：

                 </label>

                 <input type="text" placeholder="请输入密码" value="123455">

             </p>

             <p>

                 <label for="pswok">

                     密码：

                 </label>

                 <input type="text" placeholder="请输入密码" value="123455">

             </p>

             <p><input type="submit" value="注册"></p>

         </form>

     </div>

     <script>

         window.onload = function(){

             var form1 = window.document.forms[0];

             var form2 = window.document.forms[1];

             document.write("form1的长度："+form1.length+"------"+"form2的长度："+form2.length+"<br />");

             //需求：打印form2中所有input的value与input

             for(var i=0; i<form2.length; i++){

                 document.write(form2.elements[i].value);

                 document.write("<br />");

                 document.write(form2.elements[i].type);

                 document.write("<br />");

             }

             // 需求：循环遍历，如果input的type==text,则清空input的value值

             for(var i=0; i<form2.length; i++){

                 if(form2.elements[i].type == 'text'){

                     form2.elements[i].value =''

                 }

             }

         }

     </script>

 </body>

 </html>

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

form.elements[i]的更多相关文章

  1. form.elements属性

    form.elements属性与childNodes属性不同的是form.elements只返回的是表单元素组成的数组,包括input,textarea等

  2. js81:Image对象，几张图像缓存完之后动画显示，form.elements[],document.images[]

    原文发布时间为:2008-11-09 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  3. 创建dynamics CRM client-side (十三) - 在HTML Web Resource中获取form elements & 获取外部js文件

    上一节我们讨论到创建HTML Web Resource. 但是纯HTML的页面不能满足我们的需求, 所以今天我们来做在HTML Web Resource中获取form elements Please ...

  4. js Form.elements[i]的使用实例

    function pdf(){    //一个html里面可能存在多个form,所以document.form[0]指的是第一个form,document.form[1]返回就是第二个form,如果没 ...

  5. Creating Form Elements --Using BeginForm and EndForm 使用内建的Form辅助器方法 精通ASP.NET MVC 5

    Using the BeginForm and EndForm Helper Methods in the CreatePerson.cshtml File

  6. js的form基础知识点

    在HTML 中,表单是由<form>元素来表示的,而在JavaScript 中,表单对应的则是HTMLForm-Element 类型.HTMLFormElement 继承了HTMLElem ...

  7. HtmlAgilityPack中通过sibling才能得到对应的InnerText和form，option等tag的子节点

    [背景] 之前使用HtmlAgilityPack期间,遇到了2个bug: 1. InnerText没有包含对应字符串(但是用NextSibling.InnerText却可以得到) 对于html: ? ...

  8. ASP.NET MVC3 Dynamically added form fields model binding

    Adding  new Item to a list of items, inline is a very nice feature you can provide to your user. Thi ...

  9. javascript表单（form)序列化

    function serialize(form){ var part =[]; var field = null; var i; var j; var len; var optLen; var opt ...

随机推荐

  1. Storm 学习之路（四）—— Storm集群环境搭建

    一.集群规划 这里搭建一个3节点的Storm集群:三台主机上均部署Supervisor和LogViewer服务.同时为了保证高可用,除了在hadoop001上部署主Nimbus服务外,还在hadoop ...

  2. 关于AI本质的思考

    前言 最近几天和一位朋友探讨了一下现阶段的人工智能以及未来发展,并且仔细重读了尤瓦尔赫拉利的“简史三部曲”,产生了一些关于AI的新想法,觉得有必要整理出来. 程序.AI的本质 现代的计算机都是基于图灵 ...

  3. 【转载】java8中的Calendar日期对象（LocalDateTime）

    Java 8 推出了全新的日期时间API,Java 8 下的 java.time包下的所有类都是不可变类型而且线程安全. 下面是新版API中java.time包里的一些关键类: Instant:瞬时实 ...

  4. Enum的简单扩展

    1 添加一个描述的Attribute public enum MessageResult { [System.ComponentModel.Description("未通过")] ...

  5. 为什么很多IT公司不喜欢进过培训机构的人呢

    这几天在知乎看到一个问题“为什么很多IT公司不喜欢进过培训机构的人呢?” 身为IT培训师,这样的问题必然会引起我的关注, 花时间看了各路人士的回答, 我了个去,尽是对培训机构排山倒海的谩骂声, 负面评 ...

  6. 了解selenium--（虫师的博客）

    Selenium is a portable software-testing framework for web applications. Selenium is composed of seve ...

  7. Git密码修改后，Jenkins job如何批量更新密码？

    很多时候,由于一些原因,更新了Git账号密码:但是,Jenkins构建时,需要通过这个账号去拉取代码:这个时候咋办? 很多同学会说,直接一个个项目更新就OK. 那么,如果是几百个项目.甚至几千个项目呢 ...

  8. MyBatis从入门到精通(七)：MyBatis动态Sql之choose,where,set标签的用法

    最近在读刘增辉老师所著的<MyBatis从入门到精通>一书,很有收获,于是将自己学习的过程以博客形式输出,如有错误,欢迎指正,如帮助到你,不胜荣幸! 本篇博客主要讲解如何使用choose, ...

  9. 面试中常见的算法之Java中的递归

    1.方法定义中调用方法本身的现象2.递归注意实现 1) 要有出口,否则就是死递归 2) 次数不能太多,否则就内存溢出 3) 构造方法不能递归使用3.递归解决问题的思想和图解: 分解和合并[先分解后合并 ...

  10. HDU 4444：Walk（思维建图+BFS）***

    http://acm.hdu.edu.cn/showproblem.php?pid=4444 题意:给出一个起点一个终点,给出n个矩形的两个对立顶点,问最少需要拐多少次弯可以从起点到达终点,如果不能输 ...