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

列印頁面