HTML DOM 表单集合

htmlweb developmentfront end technology更新于 2024/5/20 17:16:17

HTML DOM 表单集合用于返回 HTML 文档中所有表单元素的集合。集合中的元素已排序，并按其在 HTML 文档中出现的顺序呈现。

属性

以下是表单集合的属性 −

属性	描述
length	这是一个只读属性，返回 <form> 的数量。集合中的元素。

方法

以下是表单集合的方法 −

方法	描述
[index]	返回集合中给定索引处的 <form> 元素。索引从 0 开始，如果索引超出范围则返回 null。
item(index)	返回集合中给定索引处的 <form> 元素。索引从 0 开始，如果索引超出范围则返回 null。
namedItem(id)	返回集合中指定 id 的 <form> 元素。如果 id 不存在则返回 null。

语法

以下是 HTML DOM 表单集合的语法 −

document.forms

示例

让我们看一个 HTML DOM 表单集合的示例 −

<!DOCTYPE html>
<html>
<head>
<script>
   function formCollect() {
      for(var i=0;i<document.forms.length;i++){
         var no=document.forms[i].id+"<br>";
         document.getElementById("Sample").innerHTML +=no;
      }
   }
</script>
</head>
<body>
<h1>Forms collection example</h1>
<form id="FORM1">
Fruit <input type="text" name="fname" value="Mango">
</form>
<form id="FORM2">
Age <input type="text" name="Age" value="22">
</form>
<form id="FORM3">
Password: <input type="password" name="pass" value="test">
</form>
<br>
<button onclick="formCollect()">GET IDS</button>
<p id="Sample">Following are the form ids <br></p>
</body>
</html>

输出

这将产生以下输出 −

点击"获取 IDS"按钮 −

在上面的例子中 −

我们首先创建了三个表单，ID 分别为 “FORM1”、”FORM2” 和 “FORM3”。前两个表单包含一个类型为"text"的输入元素，第三个表单包含一个类型为"password"的输入元素 −

<form id="FORM1">
Fruit <input type="text" name="fname" value="Mango" >
</form>
<form id="FORM2">
Age <input type="text" name="Age" value="22" >
</form>
<form id="FORM3">
Password: <input type="password" name="pass" value="test">
</form>

当用户点击"GET IDS"按钮时，会执行 formCollect() 方法 −

<button onclick="formCollect()">GET IDS</button>

formCollect() 方法获取 document.forms 的 length 属性值(在本例中为 3)，并在 for 循环内的测试表达式中使用它。使用表单集合中的索引号，我们获取它们的 ID，并将其附加到 ID 为"Sample"的段落中以供显示 −

function formCollect() {
   for(var i=0;i<document.forms.length;i++){
      var no=document.forms[i].id+"<br>";
      document.getElementById("Sample").innerHTML +=no;
   }
}