HTML DOM フォームのコレクション-htmlチュートリアル-php.cn

HTML DOM フォームのコレクション

WBOY

リリース： 2023-09-01 14:49:01

転載

707 人が閲覧しました

HTML DOM フォームコレクションは、HTML ドキュメント内に存在するすべてのフォーム要素をコレクションとして返すために使用されます。コレクション内の要素は、HTML ドキュメントに表示される順序で並べ替えられて表示されます。

プロパティ

以下はフォームコレクションのプロパティです。

プロパティ	説明
length	これは、コレクション内の要素の数を返す読み取り専用プロパティです。

方法

フォーム収集の方法は次のとおりです-

方法	説明
[index]	指定されたインデックスにあるコレクションから要素を返します。インデックスは 0 から始まり、インデックスが範囲外の場合は null を返します。
item(index)	指定されたインデックスからのコレクション。インデックスは 0 から始まり、インデックスが範囲外の場合は null を返します。
namedItem(id)	指定された ID のコレクションから。 ID が存在しない場合は Null を返します。

構文

次は、HTML DOM フォームコレクションの構文です。 p>

document.forms

ログイン後にコピー

例

例を見てみましょう。 DOM フォームコレクションの HTML 例を見てください -

ライブデモ

<!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>

ログイン後にコピー

出力

これにより、次の出力が生成されます-

HTML DOM表单集合

Single 「IDS を取得」ボタンをクリックしたとき -

HTML DOM表单集合

#上記の例では -

# まず「FORM1」として 3 つの ID を作成し、「FORM2」フォームと「FORM3」。最初の 2 つのフォームにはテキストタイプの入力要素があり、3 番目のフォームにはパスワードタイプの入力要素があります -

<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 の長さプロパティ値 (この例では 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;
   }
}

ログイン後にコピー

以上がHTML DOM フォームのコレクションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。