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"