原生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. SpringBoot2.1.6 整合CXF 实现Webservice

    SpringBoot2.1.6 整合CXF 实现Webservice 前言 最近LZ产品需要对接公司内部通讯工具,采用的是Webservice接口.产品框架用的SpringBoot2.1.6,于是采用 ...

  2. SpringBoot实现文件上传

    前言参考:快速开发第一个SpringBoot应用 这篇文章会讲解如何使用SpringBoot完成一个文件上传的过程,并且附带一些SpringBoot开发中需要注意的地方 首先我们写一个文件上传的htm ...

  3. js杂记：x:function(){}

    发现问题于jQuery源码,整理问题于百度知道: 如下: x:function(){} 这代表一个对象的函数 例如: var ooo = { p1:0, p2:'xxx', f1:function(p ...

  4. Java接口中的成员变量默认为（public、static、final）、方法为（public、abstract）

    interface”(接口)可将其想象为一个“纯”抽象类.它允许创建者规定一个类的基本形式:方法名.自变量列表以及返回类型,但不实现方法主体.接口也可包含基本数据类型的数据成员,但它们都默认为publ ...

  5. GitLab通过API创建项目

    示例: #!/usr/bin/python # -*- coding:utf-8 -*- import os import json import requests import subprocess ...

  6. Java 8 新特性-Stream更优雅的处理集合入门

    Java 8 新特性之--Stream 一. 简单介绍 Stream是Java 8提出了的一种新的对集合对象功能的增强.它集合Lambda表达式,对集合提供了一些非常便利,高效的操作,使得代码具有非常 ...

  7. SwiftLint：代码规范检查工具介绍

    Swift-CodeStyle Checker:SwiftLint 介绍: SwiftLint 是一个用于强制检查 Swift 代码风格和规定的一个工具,基本上以 GitHub's Swift 代码风 ...

  8. 借助URLOS快速安装WordPress

    ### 简介 WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统.WordPress具有插件架构和模板系统.截至2018年4月,排名前1000万的网站超过30.6%使 ...

  9. HDU 5534：Partial Tree（完全背包）***

    题目链接 题意 给出一个n个结点的树,给出n-1个度的权值f[],代表如果一个点的度数为i,那么它对于答案的贡献有f[i].问在这棵树最大的贡献能达到多少. 思路 对于这个图,有n*2-2个度可以分配 ...

  10. 你必须知道的Docker镜像仓库的搭建

    近期工作中发现用到的容器镜像越来越多(不多的时候没考虑过镜像仓库的问题),同一个容器镜像也存在多个版本,那么镜像仓库的搭建需求就涌现出来,本文就目前的几个常用镜像仓库的搭建进行介绍,我们可以根据需要选 ...