ywork2020.com

Title

form内の入力要素の数を取得する

目次 (INDEX)

lengthとは

ここで説明するlength とは次の語句からなるjavascriptのプロパティです。
length
読み: レン
意味: 長さ

目次に戻る

lengthプロパティの概要

ここで説明するlengthは、HTMLFormElement (form要素) のプロパティです。

このプロパティは、そのフォーム内に入力要素が幾つ配置されているかを整数として取得することができます。

このプロパティは読み取り専用です。

lengthプロパティは他のオブジェクトにもありますが、オブジェクトにより、取得できる値は違います。

目次に戻る

構文

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

var integer = form.length;

目次に戻る

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

ここでは、form要素内に input要素text型 と input要素number型 と select要素 を配置してみました。

このformにはname属性で "myForm" という名前を設定しています。この名前に該当するform要素内にある入力要素の数を取得してみます。

サンプルコード: CSS
<style>
	form{
		background-color: ##lightblue;
		padding: 1em;
	}
	div{
		margin: 2em;
	}
</style>
  • 03: background-color (背景色を設定します。)
  • 04: padding (要素の境界線の内周の余白を設定します。)
  • 07: margin (要素の境界線の外周の余白を設定します。)
サンプルコード: HTML
<body>
	<form action="送信先URIを指定" name="myForm">
		<div><input type="text" name="myText" value="テキスト"></div>
		<div><input type="number" name="myNumber" value="0"></div>
		<div>
			<select name="mySelect">
				<option value="選択肢A">選択肢A</option>
				<option value="選択肢B">選択肢B</option>
			</select>
		</div>
	</form>
	<div>
		結果: id="idOutput"<br>
		<output id="idOutput">innerText</output>
	</div>
</body>
  • 02-11: form (name="myForm": この要素内にある入力要素の数を取得することになります。)
  • 14: output (この要素のコンテンツに入力要素の数を表示します。)
サンプルコード: script
<script>
	let elmOutput = document.getElementById("idOutput");
	elmOutput.innerText = document.forms.namedItem("myForm").length;
</script>
  • 02: elmOutput (id="idOutput"の要素をElementオブジェクトとして取得します。)
  • 03: .length (document変数からforms.namedItem("myForm").lengthと参照すると"myForm"内の入力要素の数を取得できます。)
実行結果:
結果: id="idOutput"
innerText

目次に戻る