HTML | DOM 表单集合

DOM 表单集合用于返回 HTML 文档中所有

元素的集合。表单元素按照它们在源代码中的显示进行排序。

句法：

document.forms

属性： ：它返回元素集合中表单的数量。

方法： DOM 表单集合包含下面列出的三个方法：

• [index] ：用于返回指定索引的 元素。索引值从 0 开始。如果索引值超出范围，则返回 NULL。
• item(index) ：用于返回指定索引的 元素。索引值从 0 开始。如果索引值超出范围，则返回 NULL。该方法的执行与上述方法类似。
• namedItem(id) ：用于从集合中返回与指定 id 匹配的 元素。如果 id 不存在，则返回 NULL。

下面的程序说明了文档.forms 属性在 HTML 中的使用：

示例 1：本示例使用 length 属性来计算集合中表单元素的数量。

    
        
            DOM document.forms() Property
        
    
      
    
        GeeksForGeeks
        DOM document.forms Property
      
        
        
            Personal Information Area
            Name: 
        
        
          
        
        
            Home Address Information Area
            Address: 
        
        
          
        
        
            Delivery Type Area
            Delivery Speed: 
        
        
      
        
         Click the button below to count 
         the number of forms:
        
          
        
         Count forms
        
      
        
         The total number of forms in
         this page is: 
        
          
        
          
        
            function countForms() {
      
                // Count number of forms
                let collection = document.forms.length;
                document.querySelector(".count").innerHTML
                                          = collection;
            } 
        
    
                    

输出：
点击按钮前：

点击按钮后：

示例 2：

    
        
            DOM document.forms() Property
        
    
      
    
        GeeksForGeeks
        DOM document.forms Property
      
        
        
            Personal Information Area
            Name: 
        
        
          
        
        
            Home Address Information Area
            Address: 
        
        
          
        
        
            Delivery Type Area
            Delivery Speed: 
        
        
      
        
         Click the button below to find 
         all form IDs:
        
        
         Find form IDs
        
      
        The ID of all the forms is: 
          
        
          
         
            function findFormIDs() {
                let final = '';
                let collection = document.forms;
      
                // Run a loop upto the number of
                // forms in the collection
                for (let i = 0; i < collection.length; i++) {
      
                    // Add each form id to the final list
                    final += `<li> ${collection[i].id} </li>`;
                }
                  
                // Replace the inner HTML of the 
                // ID div to show the list
                document.querySelector(".ids").innerHTML = final;
            } 
        
    
                    

输出：
点击按钮前：

点击按钮后：

示例 3：

    DOM document.forms() Property

  

    GeeksForGeeks
    DOM document.forms Property
  
    
        Personal Information Area
        Name: 
    
    
        Home Address Information Area
        Address: 
    
    
        Delivery Type Area
        Delivery Speed: 
    
  
    
     Click the button below to find by form
     ID and get the name field:
    
    
     Find by form ID
    
    The text in the name field is: 
    
    
        function returnForm() {
            // find by id of 'personal-info'
            let collection = 
                     document.forms.namedItem("personal-info");
  
            // access the first element in the 
            //collection and find its value
            // in this case it would be the name field
            let name = collection[0].value;
  
            document.querySelector(".name").innerHTML = name;
  
        }
    

                    

输出：
点击按钮前：

点击按钮后：

支持的浏览器： DOM表单采集方式支持的浏览器如下：

• 谷歌浏览器
• IE浏览器
• 火狐
• 苹果浏览器
• 歌剧