原生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. ABP开发框架前后端开发系列---（11）菜单的动态管理

    在前面随笔<ABP开发框架前后端开发系列---(9)ABP框架的权限控制管理>中介绍了基于ABP框架服务构建的Winform客户端,客户端通过Web API调用的方式进行获取数据,从而实现 ...

  2. 使用Python爬取微信公众号文章并保存为PDF文件(解决图片不显示的问题)

    前言 第一次写博客,主要内容是爬取微信公众号的文章,将文章以PDF格式保存在本地. 爬取微信公众号文章(使用wechatsogou) 1.安装 pip install wechatsogou --up ...

  3. 中转Webshell 绕过安全狗（一）

    前言 听说中国菜刀里有后门.抓包我是没有监测到异常数据包.为了以防万一,且更好使用中国菜刀硬杠安全狗.笔者收集了一下资料.无耻的copy大佬的源码,只是在大佬的基础上简单修改了一下,达到Webshel ...

  4. JAVA复习笔记02

    16.interface中的成员变量默认为public static final类型,方法只能是public(默认为public) 17.内部类访问外部类成员: Outer.this.num; 18. ...

  5. （2）Linux文件和目录操作命令

    简单就是高效 pwd cd -/~/.. tree–a/d/f/i/L mkdir–p/v/m touch ls –l/a//i/h/F cp –r/p/d/a mv rm –f/r/i rmdir ...

  6. ElasticSearch 7.1.1 集群环境搭建

    1. 集群简介 三台机器,均用于保存数据且可被选为master节点 服务版本 服务 版本 elasticsearch 7.1.1 jdk 1.8 1. 创建elsearch用户 不建议直接使用root ...

  7. Codeforces Gym101246J：Buoys（三分搜索）

    http://codeforces.com/gym/101246/problem/J 题意:给出n个点坐标,要使这些点间距相同的话,就要移动这些点,问最少的需要的移动距离是多少,并输出移动后的坐标. ...

  8. BZOJ 1067：[SCOI2007]降雨量（RMQ+思维）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1067 题意:…… 思路:首先我们开一个数组记录年份,一个记录降雨量,因为年份是按升序排列的,所以我们 ...

  9. django ORM中的RelatedManager(关联管理器)

    关联管理器应用在 一对多的表 或者 多对多的表 多对多表中的用法: 在多对多的表中 正向查询 #基于对象的查询 #正查 # author_obj = Author.objects.get(id=1) ...

  10. c++ 归并排序

    c++ 归并排序 输入输出格式 输入格式: 第11行为一个正整数NN,第22行包含NN个空格隔开的正整数a_ia i ​ ,为你需要进行排序的数,数据保证了A_iA i ​ 不超过1000000000 ...