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

启动您的 职业生涯

完成课程获得认证

开始学习
广告