HTML - DOM文档 forms 属性

forms 是一个只读属性，用于返回 HTML 文档中所有表单元素的集合。集合中的元素按顺序排列，与它们在 HTML 文档中出现的顺序相同。

语法

document.forms;

属性

属性	描述
length	返回 HTML 文档中 ` ` 元素的数量。

方法

下表显示了 DOM forms 集合提供的方法列表。

方法	描述
[index]	返回集合中给定索引处的 `` 元素。索引从 0 开始，如果索引超出范围，则返回 null。
item(index)	返回集合中给定索引处的 `` 元素。索引从 0 开始，如果索引超出范围，则返回 null。它与第一种方法类似。
namedItem(id)	返回集合中具有给定 id 的 `` 元素。如果 id 不存在，则返回 null。

返回值

它返回一个 HTMLCollection，其中列出了文档中所有 `` 元素。

HTML DOM 文档 'forms' 属性示例

以下示例演示了 forms 属性和方法的使用。

获取 `` 元素的数量

在以下示例中，length 属性用于返回文档中 <form> 元素的数量。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Document forms Property
    </title>
</head>
<body>
    <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="fun()">Click me</button>
    <p id="form"></p>
    <script>
        function fun() {
            let y = document.forms.length;
            document.getElementById("form").innerHTML = "Number of form elements : " + y;
        }
    </script>
</body>
</html>

获取第一个 `` 元素的文本内容

以下示例使用 [index] 方法返回第一个 `` 元素的文本内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Document forms Property
    </title>
</head>
<body>
    <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="fun()">Click me</button>
    <p id="Sample">form id :<br></p>
    <p id="form"></p>
    <script>
        function fun() {
            let x = document.forms[0].textContent 
                +"<br>";
            document.getElementById("form").innerHTML += x;
        }
    </script>
</body>
</html>

获取第一个 `` 元素的 id

以下示例使用 item(index) 方法返回第一个 `` 元素的 id。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Document forms Property
    </title>
</head>
<body>
    <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="fun()">Click me</button>
    <p id="Sample">form id: <br></p>
    <p id="form"></p>
    <script>
        function fun() {
            let x = document.forms.item(0).id 
                +"<br>";
            document.getElementById("form").innerHTML += x;
        }
    </script>
</body>
</html>

获取指定 id 的 HTML 内容

以下示例返回具有指定 id 的 `` 元素的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Document forms Property
    </title>
</head>
<body>
    <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="fun()">Click me</button>
    <p id="Sample">HTML contetn with specified id :<br></p>
    <p id="form"></p>
    <script>
        function fun() {
            let x = document.forms.namedItem("FORM2").innerHTML;
            document.getElementById("form").innerHTML = x;
        }
    </script>
</body>
</html>

支持的浏览器

属性
forms	是 1	是 12	是 1	是 1	是 12.1

html_dom_document_reference.htm

打印页面