document.forms用法示例介绍

document.forms用法详解

最新推荐文章于 2022-07-04 17:24:08 发布

转载最新推荐文章于 2022-07-04 17:24:08 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/uestczp/blog/689775

文章标签：

#javascript #ViewUI

本文介绍了如何使用document.forms属性来获取网页中的表单元素。通过示例代码展示了如何选取特定表单并读取其内元素的值，以及如何触发表单提交。适用于希望增强网页表单交互性的前端开发者。

forms 返回一个集合包含了了当前文档中的所有form元素，下面通过示例为大家介绍下document.forms用法,需要的朋友可以参考下

概述

forms 返回一个集合 (一个HTMLCollection对象),包含了了当前文档中的所有form元素.

语法

var collection = document.forms;

例子

获取表单信息

 
            < 
            script 
            type 
            = 
            "text/javascript" 
            > 
           
 
            $(function(){ 
           
 
            var thisForm = document.forms['form1']; //获取name为form1的form表单 
           
 
            //或者 
           
 
            //var thisForm = document.forms[0]; //获取第一个form表单 
           
 
            console.info(thisForm.username.value); //输出表单name属性值为form1的 username的值 
           
 
            console.info(thisForm.address.value); 
           
 
            document.forms[0].submit(); //表单提交 
           
 
            }) 
           
 
            </ 
            script 
            > 
           
 
            < 
            body 
            > 
           
 
            <!-- 以下为三个简单的form表单 --> 
           
 
            < 
            form 
            action 
            = 
            "x" 
            name 
            = 
            "form1" 
            > 
           
 
            < 
            input 
            type 
            = 
            "text" 
            name 
            = 
            "username" 
            value 
            = 
            "zhangsan" 
            /> 
           
 
            < 
            input 
            type 
            = 
            "text" 
            name 
            = 
            "address" 
            value 
            = 
            "beijing" 
            /> 
           
 
            </ 
            form 
            > 
           
 
             < 
             form 
             action 
             = 
             "x" 
             name 
             = 
             "form2" 
             > 
            
 
             </ 
             form 
             > 
            
 
              < 
              form 
              action 
              = 
              "x" 
              name 
              = 
              "form3" 
              > 
             
 
              </ 
              form 
              > 
             
 
              </ 
              body 
              > 
             