ywork2020.com

Title

form要素のコレクションを取得する

目次 (INDEX)

formsとは

ここで説明するforms とは次の語句からなるjavascriptのプロパティです。
forms
読み: フォームス
意味: formの複数形、ITでは入力欄の意味。

目次に戻る

formsプロパティの概要

これはDocumentオブジェクトのプロパティの1つです。 Documentオブジェクトはdocument変数、またはdocumentプロパティから参照します。

このプロパティは読み取り専用であり、ドキュメントに含まれている全ての form 要素を参照してHtmlCollectionオブジェクトを取得します。

取得したHtmlCollectionは配列風のオブジェクトであり、NodeListに似ています。 これは生きたHtmlCollectionであり、 コレクションの内容はページ要素の変化と共に更新されるものとなります。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var formsCollection = document.forms;

目次に戻る

サンプルコードと実行結果

ここではformsプロパティからコレクションを取得して、各form要素内のテキストボックスの値を取得してみたいと思います。

このコードで示している重要なポイントは、どの form 要素かを特定することです。 その後に続く .namedItem("namText").value の部分は変わりません。

このサンプルコードでは、取得したコレクションから、form 要素を特定する方法を3つ挙げています。

サンプルコード: CSS
<style>
	form{
		border: thin solid ##lightgray;
		box-shadow: 5px 5px 5px ##gray;
		padding: 10px;
	}
</style>
サンプルコード: HTML
<body>
	<form name="namForm_A">
		<input type="text" value="サンプルテキストA" name="namText">
	</form>
	<p><output id="idOutput_A">innerText</output></p>

	<form name="namForm_B">
		<input type="text" value="サンプルテキストB" name="namText">
	</form>
	<p><output id="idOutput_B">innerText</output></p>

	<form name="namForm_C">
		<input type="text" value="サンプルテキストC" name="namText">
	</form>
	<p><output id="idOutput_C">innerText</output></p>
</body>
サンプルコード: script
<script>
	let elmOutput_A = document.getElementById("idOutput_A");
	let elmOutput_B = document.getElementById("idOutput_B");
	let elmOutput_C = document.getElementById("idOutput_C");
	elmOutput_A.innerText = document.forms.item(0).elements.namedItem("namText").value;
	elmOutput_B.innerText = document.forms[1].elements.namedItem("namText").value;
	elmOutput_C.innerText = document.forms.namedItem("namForm_C").elements.namedItem("namText").value;
</script>
  • 05: document.forms.item(0) (item()メソッドを使用しています。コレクションのインデックス番号が [0] のform要素のことです。つまりHTML文書で1番初めに読み込まれたform要素のことです。)
  • 06: document.forms[1] (配列表記を使用しています。コレクションのインデックス番号が [1] のform要素のことです。つまりHTML文書で2番初めに読み込まれたform要素のことです。)
  • 07: document.forms.namedItem("namForm_C") (namedItem()メソッドを使用しています。コレクション中のid値、またはname値が引数に一致したform要素のことです。つまりHTML文書で3番初めに読み込まれたform要素のことです。)
  • 補足: インデックスについて (インデックス番号は 0から始まり順番に1づつ増えていく識別番号です。つまり 0 が1番初めの要素になります。)
実行結果:

innerText

innerText

innerText

目次に戻る