HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLDOMフォームコレクション

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

プロパティ

フォームコレクションのプロパティは次のとおりです-

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

メソッド

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

メソッド 説明
[index] 指定されたインデックスのコレクションから要素を返します。インデックス作成は0から始まり、インデックスが範囲外の場合はnullが返されます。
item（index） 指定されたインデックスのコレクションから要素を返します。インデックス作成は0から始まり、インデックスが範囲外の場合はnullが返されます。
namedItem（id） 指定されたIDを持つコレクションから要素を返します。 IDが存在しない場合は、Nullが返されます。

構文

以下は、HTMLDOMフォームコレクションの構文です-

document.forms

例

HTMLDOMフォームコレクションの例を見てみましょう-

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

出力

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

HTMLDOMフォームコレクション

[IDSを取得]ボタンをクリックすると-

HTMLDOMフォームコレクション

上記の例では-

最初に、IDがそれぞれ「FORM1」、「FORM2」、「FORM3」の3つのフォームを作成しました。最初の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;
   }
}

  1. HTMLDOMTextareaフォームプロパティ

    HTML DOM Textareaフォームプロパティは、テキストエリアを囲むフォームの引用を返します。 構文 以下は構文です- object.form HTML DOM Textareaフォームプロパティの例を見てみましょう： 例 <!DOCTYPE html> <html> <style>    body {       text-align: center;       background-color: #363946;       col

  2. HTMLDOMオブジェクトフォームプロパティ

    HTML DOM Object formプロパティは、要素の囲みフォームの参照を返します。 以下は構文です- フォームへの参照を返す オブジェクト ObjectElement.form オブジェクトフォームプロパティの例を見てみましょう − 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Object form</title> <style>    form {       width:70%;   &nbs