js如何遍历表单所有控件

一、总结

一句话总结：

1、获取form表单里面的的所有元素：通过formelement.elements，这里form元素通过name属性直接定位

var fele=form01.elements;

2、循环遍历获取特定的元素：通过elements[i]的形式

var e=fele[i];

前两步即可遍历表单所有控件

3、判断一个控件的类型是不是type：通过element.type

if (e.type=='submit') {

二、js如何遍历表单所有控件

1、案例截图

2、案例代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <style type="text/css">

     /*    input{background: green}

         input[type=submit]{

             background: orange

         }*/

     </style>

 </head>

 <body>

     <form action="#" method="post" name="form01">

         <p>昵称：<input type="text" name="username"></p>

         <p>密码：<input type="password" name="password"></p>

         <p><input type="submit" value="提交"></p>

     </form>

     <script type="text/javascript">

         function getFele(){

             var fele=form01.elements;

             // alert(fele.length)

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

                 var e=fele[i];

                 if (e.type=='submit') {

                     e.style.background='orange'

                 }else{

                     e.style.background='green'

                 }

             }

         }

         getFele()

     </script>

 </body>

 </html>

js如何遍历表单所有控件的更多相关文章

  1. 使用jquery.validate.js插件进行表单里控件的验证

    jsp中具体实现的代码: <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  2. Js表单验证控件-02 Ajax验证

    在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...

  3. 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法，日期转换和前台显示格式之间，还有JSON取日期数据格式转换成标准日期格式的问题

    项目里有些不同页面间的日期显示格式是不同的, 第一个问题: 比如我用日期控件WdatePicker.js导包后只需在input标签里加上onClick="WdatePicker()" ...

  4. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  5. 【ASP.NET 基础】表单和控件

    1.HTML表单的提交方式 对于一个普通HTML表单来说,它有两个重要的属性:action 和 method.action属性指明当前表单提交之后由哪个程序来处理,这个处理程序可以是任何动态网页或者 ...

  6. ASP.NET开发中主要的字符验证方法-JS验证、正则表达式、验证控件、后台验证

    ASP.NET开发中主要的字符验证方法-JS验证.正则表达式.验证控件.后台验证 2012年03月19日 星期一 下午 8:53 在ASP.NET开发中主要的验证方法收藏 <1>使用JS验 ...

  7. 【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  8. SNF开发平台WinForm-表单验证控件-通用

    CS程序也能做到像BS程序一样的验证效果,如下: 1.验证控件的展示 校验时如果不符合验证条件的控件,会在控件上显示较显眼的图标. 当出现不符合验证的控件时,鼠标悬浮会显示自定义的提示信息. 如:输入 ...

  9. JS获取填报扩展单元格控件的值

    1. 问题描述 填报预览时,我们想获取到某个控件的值相对来说较容易.但如果控件是扩展的,就只能获取到第一个值,无法根据扩展一行行获取对应的值. 例:本意是想获取到袁成洁,结果还是获取到第一个单元格值孙 ...

随机推荐

  1. hdu4605Magic Ball Game 树状数组

    //给一棵树.树的每个节点的子节点个数是0或2 //对于每个节点都有一个权值w[i] //一个权值为x的球在每个节点的情况有 //x=w[i] 这个球在该点不向下掉 //x<w[i] 这个球往左 ...

  2. [python]-类与对象-上

    [类]是一个函数包.类中可以放置函数和变量,然后类中的函数可以很方便的使用类中的变量 1.类的定义 2.类中方法的调用 在类中被定义的函数被称为类的[方法],描述的是这个类能做什么.我们使用类名.函数 ...

  3. 洛谷 P1206 [USACO1.2]回文平方数 Palindromic Squares

    P1206 [USACO1.2]回文平方数 Palindromic Squares 题目描述 回文数是指从左向右念和从右向左念都一样的数.如12321就是一个典型的回文数. 给定一个进制B(2< ...

  4. 洛谷 P1192 台阶问题

    P1192 台阶问题 题目描述 有N级的台阶,你一开始在底部,每次可以向上迈最多K级台阶(最少1级),问到达第N级台阶有多少种不同方式. 输入输出格式 输入格式: 输入文件的仅包含两个正整数N,K. ...

  5. 洛谷 P2693 [USACO1.3]号码锁 Combination Lock

    P2693 [USACO1.3]号码锁 Combination Lock 题目描述 农夫约翰的奶牛不停地从他的农场中逃出来,导致了很多损害.为了防止它们再逃出来,他买了一只很大的号码锁以防止奶牛们打开 ...

  6. JAVA开发类似冒险岛的游戏Part1

    JAVA开发类似冒险岛的游戏Part1 一.总结 二.JAVA开发类似冒险岛的游戏Part1 初学嘛) ,不过总的来说这个程序还是很有意思的.这里我重新再整理了一下,希望能帮助到其他想要开发类似程序的 ...

  7. 关于YUM错误，Error: rpmdb open failed

    错误如题: rpmdb: Thread/process / failed: Thread died in Berkeley DB library error: db3 error(-) from db ...

  8. Altium Designer线如何跟着原件走

  9. JS学习笔记 - fgm练习 2-11- 改变图片路径 var img = new Image(); 图片预加载

    <style> *{ margin: 0;padding: 0; list-style: none; } body{ background: black; } .outer{ margin ...

  10. React-Native_02:语法篇

    1.简单介绍 ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式公布了.它的目标.是使得JavaScript语言能够用来编写复杂的大型应用程 ...