原生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. IOS 数据存储（NSKeyedArchiver 归档篇）

    什么是归档 当遇到有结构有组织的数据时,比如字典,数组,自定义的对象等在存储时需要转换为字节流NSData类型数据,再通过写入文件来进行存储. 归档的作用 之前将数据存储到本地,只能是字符串.数组.字 ...

  2. 视频直播：Windows中各类画面源的截取和合成方法总结

    当今,视频直播技术和实时音视频技术已经是很多行业必备,典型的应用场景有教育直播.远程视频会议.互联网娱乐等.在移动端发起直播,其画面源的种类是十分有限的,无非是取摄像头.截屏等.PC端由于其系统资源充 ...

  3. 算法与数据结构基础 - 队列(Queue)

    队列基础 队列具有“先进先出”的特点,用这个特点我们可以用它来处理时间序列相关或先后次序相关的问题,例如 LeetCode题目 933. Number of Recent Calls,时间复杂度O(1 ...

  4. 【JAVA NIO】java NIO

    本文是博主深入学习Netty前的一些铺垫,之前只是使用Netty,用的很粗暴,导包,上网找个DEMO就直接用,对Netty中的组件了解并不深入. 于是再此总结下基础,并对一些核心组件作如下记录: 1. ...

  5. QT MSVC编译中文乱码问题

    两种解决方案: 1,在文件头添加 #if _MSC_VER >= 1600 #pragma execution_character_set("utf-8") #endif 注 ...

  6. spark 源码分析之五 -- Spark内置RPC机制剖析之一创建NettyRpcEnv

    在前面源码剖析介绍中,spark 源码分析之二 -- SparkContext 的初始化过程 中的SparkEnv和 spark 源码分析之四 -- TaskScheduler的创建和启动过程 中的C ...

  7. 单个单选框radio 点击选中点击取消选中

    $("input:radio").click(function(){ var domName = $(this).attr('name');//获取当前单选框控件name 属性值 ...

  8. springboot2.0.4对接redis3.2.12版本哨兵模式

    redis 哨兵模式的创建 1. 下载redis3.2.12版本.https://codeload.github.com/antirez/redis/zip/3.2.12 2.  解压后放到/usr/ ...

  9. Vue快速学习_第二节

    表单输入绑定(v-model) v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定(注意只在表单这几个可 ...

  10. 6.秋招复习简单整理之请你谈谈JDBC的反射，以及它的作用？

    通过反射com.mysql.jdbc.Driver类,实例化该类时会调用该类的静态代码块,该代码块会去java的DriverManager类中注册自己,DriverManager管理所有已注册的驱动类 ...