如何使用 JavaScript 查詢文件中第一個表單的名稱？

在本教程中，我們將學習如何查詢 HTML 文件中第一個表單的名稱。有時，我們會出於不同目的在 HTML 文件中使用多個表單標籤。這時，我們可能會難以找到特定的<form>元素來新增更多屬性。在這種情況下，我們可以使用“document”介面的forms屬性來單獨和集體地訪問文件中所有<form>元素。

Document.forms

如上所述，forms 屬性用於訪問文件中存在的所有表單。forms屬性返回HTMLCollection，這是一種類似於 JavaScript 中陣列的資料型別，它包含 HTML 文件中所有<form>元素的集合，並允許我們集體訪問所有表單。我們可以像訪問 JavaScript 中使用方括號訪問陣列元素一樣訪問此HTMLCollection中的表單。但根據教程標題，我們將看到forms屬性的實現，以查詢文件中第一個表單的名稱。

語法

以下語法將顯示如何使用forms屬性使用 JavaScript 訪問文件中第一個表單的名稱。

let formName = document.forms[0].name;

在上面的語法中，我們使用方括號語法訪問集合的第一個元素，然後使用 name 屬性獲取其名稱。

步驟

  • 步驟 1 - 在第一步中，我們需要在文件中定義兩個或多個表單標籤，然後使用 JavaScript 的forms屬性訪問它們。
  • 步驟 2 - 在下一步中，我們將使用上述語法來獲取文件中第一個表單的名稱。
  • 步驟 3 - 在第三步中，我們將使用 JavaScript 在使用者螢幕上顯示錶單數量以及文件中第一個表單的名稱。

讓我們透過程式碼示例來實際瞭解它 -

示例 1

下面的示例將說明forms屬性在使用 JavaScript 查詢文件中第一個表單名稱時的實際實現 -

<!DOCTYPE html>
<html>
<body>
   <h3>Find the name of the first form in a document</h3>
   <form name="formOne">
      <label>Input from the first form named formOne:</label><br>
      <input type="text" placeholder="formOne"><br>
   </form>
   <form name="formTwo">
      <label>Input from the second form named formTwo:</label><br>
      <input type="text" placeholder="formTwo">
   </form>
   <p id="result"></p>
   <script>
      let formElem = document.forms;
      let firstForm = formElem[0].name;
      document.getElementById("result").innerHTML = "The number of forms in the document: " + formElem.length + "<br>" +
      "The name of first form in the document: " + firstForm;
   </script>
</body>
</html>

在上面的示例中，我們在文件中使用了兩個名為formOne和formTwo的表單。我們訪問在form內文件中存在的所有表單的列表，該列表將是HTMLCollection型別。之後，我們使用方括號語法訪問列表的第一個元素以獲取文件中的第一個表單，並使用name屬性獲取firstForm內的表單名稱。

讓我們看看如果我們在文件中嵌套了兩個表單，forms屬性將返回什麼值。

方法

  • 步驟 1 - 在此步驟中，我們將定義兩個相互巢狀的表單，併為它們指定特定的名稱。
  • 步驟 2 - 在第二步中，我們使用forms屬性獲取文件中存在的表單列表，就像我們在之前的示例中所做的那樣。
  • 步驟 3 - 在第三步中，我們將使用name屬性訪問第一個表單的name，並使用 JavaScript 將其顯示在使用者螢幕上。

示例 2

下面的示例將顯示在巢狀表單的情況下forms屬性將如何反應 -

<html>
<body>
   <h3>Find the name of the first form in a document</h3>
   <form name="parent">
      <form name="child">
         <label>Input from the form nested inside another form named
         parent:</label><br>
         <input type="text" placeholder="Child Form">
      </form>
   </form>
   <p id="result"></p>
   <script>
      let form = document.forms;
      let firstForm = form[0].name;
      document.getElementById("result").innerHTML = "The number of forms in the document: " + form.length + "<br>" +
      "The name of first form in the document: " + firstForm;
   </script>
</body>
</html>

在這個例子中，我們看到forms屬性將巢狀表單視為單個表單，並返回文件中第一個表單的名稱，無論它是否包含巢狀表單。

閱讀本教程後，您可以使用 JavaScript 的forms屬性找到文件中第一個表單的名稱。我們還學習了一種新的資料型別HTMLCollection，它與 JavaScript 中的陣列資料型別非常相似，以及在文件中包含巢狀表單的情況下forms屬性的反應。

更新於：2022年10月31日

1K+ 次檢視

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.