获取表单对象的六种方式

拼搏现实的明天。 2022-05-18 05:42 209阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>获取表单对象的六种方法</title> 
        <script>
            function test(){
               //获取表单对象 
            }   
        </script> 
    </head>
    <body>
        <form name="form1" id="formId" action="test.html" method="get">
            用户名:<input name="uname"  /><br/>
            密码:<input type="password" name="pwd"/><br/>
            <input type="submit" value="提交" />
        </form>
        <form name="form2" id="formId2" action="test.html" method="get">
            用户名:<input name="uname"  /><br/>
            密码:<input type="password" name="pwd"/><br/>
            <input type="submit" value="提交" />
        </form>
        <input type="button" value="test" onclick="test()" />
    </body>
    </html>

## 1.使用documen对象的方法 getElementxxx 方式， id name class tag ##

//form对象的第1种获取方式
     var form1=document.getElementById("formId");//[object HTMLFormElement]
    
    //form对象的第2种获取方式 
     var form1=document.getElementsByName("form1")[0];//[object HTMLFormElement]
    
    //form对象的第3种获取方式 
     var form1=document.getElementsByTagName("form")[0];//[object HTMLFormElement]

##    2.使用document对象直接获取 ##

var forms=document.forms;
    for(var i =0 ;i<forms.length;i++){
        alert(forms[i].name);
    }

###    2.1 document.id ###

//form对象的 第4种获取方式
     var form1=document.forms[0];

###    2.2 document.forms\[index\] ###

//form对象的 第5种获取方式
     var form1=document.forms["form1"];

###    2.3 document.forms\[id\] ###

//form对象的第6种获取方式
    var form1=document.form1;

发表评论取消回复

表情：

评论列表（有 0 条评论，209人围观）

还没有评论，来说两句吧...

相关阅读

相关获取class对象的六种方式

前言： java程序在计算机中运行有，三个主要的阶段，代码阶段/编译阶段，Class类阶段（加载阶段），runtime运行阶段。在不同的阶段我们可以通过不同的方法来获取cl

柔情只为你懂/ 2024年03月16日 10:17/ 0 赞/ 77 阅读

相关 ant-desgin 的表单获取表单实例的两种方式

函数式组件 import { Modal, Form, Input, Button, Space } from 'antd'; const [for

ゝ一纸荒年。/ 2023年02月27日 12:14/ 0 赞/ 40 阅读

相关获取表单元素的方式

document.getElemenById("表单标签的ID") document.getElementByName("表单标签的name")\[索引\] documen

浅浅的花香味﹌/ 2022年09月30日 06:13/ 0 赞/ 152 阅读

相关 js表单序列化，jquery获取表单对象的属性值

//获取表单数据 var data = $("\loginForm"); //序列化表单为json格式数据 var jsonData = d

た入场券/ 2022年08月13日 12:49/ 0 赞/ 167 阅读

相关 Javaweb获取表单数据的几种方式

Javaweb获取表单数据的几种方式一、通过键值对的形式获取表单数据 getParameter(String name)：通过key，返回一个value。

痛定思痛。/ 2022年07月10日 04:30/ 0 赞/ 300 阅读

相关 form表单提交的几种方式

1. <form id="myform" name="myform" method="post" onsubmit="return sumbitTest();" 2.

超、凢脫俗/ 2022年06月12日 03:20/ 0 赞/ 239 阅读

相关页面表单提交的几种方式

一,简单的表单提交页面; submit提交方式: <table style="width:0px;"> <tbody> <tr> <td style="b

﹏ヽ暗。殇╰゛Y/ 2022年05月26日 08:30/ 0 赞/ 229 阅读

相关获取表单对象的六种方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

拼搏现实的明天。/ 2022年05月18日 05:42/ 0 赞/ 210 阅读

相关 Java获取class对象的三种方式

Class类阅读API的Class类得知，Class 没有公共构造方法。Class 对象是在加载类时由 Java 虚拟机以及通过调用类加载器中的 defineClass

淡淡的烟草味﹌/ 2022年05月16日 12:20/ 0 赞/ 262 阅读

相关 JS获取元素对象的三种方式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

梦里梦外;/ 2021年12月12日 16:53/ 0 赞/ 997 阅读