如何使用 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+

啟動您的 職業生涯

完成課程獲得認證

開始學習
廣告