如何使用 JavaScript 獲取文件中表單的數量？

在本教程中，我們將學習如何使用 JavaScript 獲取文件中表單的數量。由於在 HTML 文件中建立表單的方法不同，因此獲取現有表單的數量可能會變得棘手。但是，您可以使用一些方法來計算建立的表單，即使這些表單不是使用 form 標籤建立的。

使用 length 屬性

在 HTML 文件中建立表單最廣泛接受的方法是使用 <form> 標籤。某些網站也使用 <div> 標籤在文件中建立表單。因此，我們將討論從 <form> 和 <div> 標籤獲取表單數量的方法。

語法

使用以下語法，我們可以使用 <form> 標籤獲取 HTML 文件中表單的數量。

document.forms.length

演算法

步驟 1 − 使用 <form> 標籤在 HTML 文件中建立表單。

步驟 2 − 建立一個變數來獲取表單的數量。

步驟 3 − 使用 document.forms.length 獲取表單的數量。

步驟 4 − 使用 innerHTML 屬性顯示錶單的數量。

示例 1

在此示例中，我們建立了一個表單來檢查 document.forms.length 如何確定表單的實際數量。您可以嘗試修改程式碼並增加表單數量以檢視輸出。

<html>
<body>
   <form>
     <input type="text">
      <input type="submit">
   </form>
   <p id=numform></p>
   <script>
      let forms = document.forms.length;
      document.getElementById('numform').innerHTML = "Number of forms: " + forms;
   </script>
</body>
</html>

使用 querySelectorAll() 獲取文件中表單的數量

由於表單可以使用 <div> 在網站中建立，因此您可以使用 querySelectorAll() 方法獲取表單的數量。在 querySelectorAll() 中，您必須指定型別、類、ID 和名稱，這些名稱可能包含“form”一詞。

語法

使用以下語法，您可以獲取在文件中建立的表單的數量，即使這些表單沒有使用標籤。

var forms = document.querySelectorAll("[type='form'],[name ='form'],[id='form']"); 
for(var i = 0; i < forms.length; i++);
 x.innerHTML = forms.length;

演算法

步驟 1 − 建立兩個表單，一個使用 <div> 標籤，另一個使用標籤。

步驟 2 − 對於第一個 div，編寫 type = 'form'，對於第二個 div，編寫 id = 'form'。

步驟 3 − 在 JavaScript 中，使用 querySelectorAll() 方法透過標籤和 ID 名稱獲取這兩個 <div> 標籤

步驟 4 − 使用自增運算子和 .length 方法獲取使用 <form> 標籤建立的多個表單。

示例

在以下示例中，我們獲取了未使用標籤建立的表單的數量，並將其與使用 <form> 標籤建立的表單數量相加。

<html>
<body>
   <h4>Using <i>querySelectorAll()</i> to get the number of forms</h4>
   <div type="form">
      <input type="text">
      <input type="submit">
   </div>
   <form>
      <input type="text">
      <input type="submit">
   </form>
   <p id="numform"></p>
   <script>
      var elms = document.querySelectorAll("[type='form']");
      for (var i = 0; i < elms.length; i++);
      let x = elms.length;
      let forms = document.forms.length + x;
      document.getElementById('numform').innerHTML = "Number of forms: " + forms;
   </script>
</body>
</html>

雖然 document.forms.length 方法通常用於獲取文件中存在的表單數量，但要找出實際存在的表單數量，您應該使用 querySelectorAll() 方法。可能還有其他方法可以獲取文件中建立的表單數量。上面提到的方法是最可靠的。

更新於： 2022-09-14

995 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告