原生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. 10 table标签

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  2. Hexo+NexT（一）：在Windows下安装Hexo+NexT及搭建博客

    阅读本篇之前,假定读者已经有了Node.js的基础,如需要补充Node.js知识的,请自行百度. Hexo是在Node.js框架下的一个项目,利用Node.js提供的强大功能,完成从Markdown到 ...

  3. 多线程与高并发(三)synchronized关键字

    上一篇中学习了线程安全相关的知识,知道了线程安全问题主要来自JMM的设计,集中在主内存和线程的工作内存而导致的内存可见性问题,及重排序导致的问题.上一篇也提到共享数据会出现可见性和竞争现象,如果多线程 ...

  4. mac下mysql的卸载和安装

    1. mysql的卸载 1 sudo rm /usr/local/mysql 2 sudo rm -rf /usr/local/mysql* 3 sudo rm -rf /Library/Startu ...

  5. 向Rocket.Chat推送消息

    Rocket.Chat推送消息 Rocket.Chat是一个开源实时通讯平台, 支持Windows, Mac OS, Linux. 支持聊天, 文件上传, 视频通话, 语音通话功能. 向Rocket. ...

  6. mount -- 挂载理解

    1.挂载? 在windows操作系统中, 挂载通常是指给磁盘分区(包括被虚拟出来的磁盘分区)分配一个盘符. 第三方软件,如磁盘分区管理软件.虚拟磁盘软件等,通常也附带挂载功能. 在linux操作系统中 ...

  7. 设计模式-责任链模式（responsibility）

    责任链模式是行为模式的一种,该模式构造一系列的分别担当不同职责的类的对象(HeaderCar.BodyCar.FooterCar)来共同完成一个任务,这些类的对象之间像链条一样紧密相连. 角色和职责: ...

  8. scrapy基础知识之 parse()方法的工作机制思考：

    1.因为使用的yield,而不是return.parse函数将会被当做一个生成器使用.scrapy会逐一获取parse方法中生成的结果,并判断该结果是一个什么样的类型: 2.如果是request则加入 ...

  9. 谈谈 c# 对象初始化问题

    C#对象初始化 之前在学习过程中只是知道该如何初始化对象,但是却不明白为何要这么做,不这么做有什么问题. 现在就针对我最近遇到的问题(定义了全局字节数组没有初始化,然后在多线程里头使用,然后就一直报n ...

  10. 利用LDAP操作AD域

    LDAP操作代码样例  初始化LDAP 目录服务上下文 该例子中,我们使用uid=linly,ou=People,dc=jsoso,dc=net这个账号,链接位于本机8389端口的LDAP服务器(ld ...