获取表单对象的六种方式

最新推荐文章于 2022-06-13 15:41:07 发布

骑猪下不来的猴

最新推荐文章于 2022-06-13 15:41:07 发布

阅读量5.4k

点赞数 1

分类专栏： HTML JavaScript 文章标签： form对象 js

本文链接：https://blog.csdn.net/weixin_42529699/article/details/81289872

版权

JavaScript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

HTML

11 篇文章 1 订阅

订阅专栏

<!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;

骑猪下不来的猴

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
获取表单对象的六种方式

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;获取表单对象的六种方法&lt;/title&gt; &lt;script&gt; function test(){
复制链接

扫一扫