formObject.lengthは、form要素（フォーム要素）内のフォーム部品要素の数を取得するプロパティ。
構文
var $length = $formObject.length;
戻り値
form要素（フォーム要素）内のフォーム部品要素の数。
サンプル
【出力欄】
名前：
地域：
【入力欄】のフォーム部品要素数：
サンプルの動作について
- 【入力欄】の「名前：」の右横のテキスト入力欄の内容を変更すると、テキスト入力欄の内容を、【出力欄】の「名前：」の右横に表示する。
- 【入力欄】の「地域：」の右横のセレクトボックスで地域を選択すると、選択した地域名を、【出力欄】の「地域：」の右横に表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
getValue();
var $formObject = document.getElementById( "sampleForm" );
for( var $i = 0; $i < $formObject.length; $i++ ) {
$formObject.elements[$i].onkeyup = function(){
getValue();
};
$formObject.elements[$i].onchange = function(){
getValue();
};
}
document.getElementById( "sampleOutputLength" ).innerHTML = $formObject.length;
}
function getValue() {
document.getElementById( "sampleOutputName" ).innerHTML = document.getElementById( "sampleForm" ).elements[0].value;
document.getElementById( "sampleOutputArea" ).innerHTML = document.getElementById( "sampleForm" ).elements[1].value;
}
</script>
window.onload = function () {
getValue();
var $formObject = document.getElementById( "sampleForm" );
for( var $i = 0; $i < $formObject.length; $i++ ) {
$formObject.elements[$i].onkeyup = function(){
getValue();
};
$formObject.elements[$i].onchange = function(){
getValue();
};
}
document.getElementById( "sampleOutputLength" ).innerHTML = $formObject.length;
}
function getValue() {
document.getElementById( "sampleOutputName" ).innerHTML = document.getElementById( "sampleForm" ).elements[0].value;
document.getElementById( "sampleOutputArea" ).innerHTML = document.getElementById( "sampleForm" ).elements[1].value;
}
</script>
HTML
<form id="sampleForm">
【入力欄】
<br />
名前：<input type="text" value="太郎">
<br />
地域：
<select>
<option selected>関東</option>
<option>東海</option>
<option>関西</option>
</select>
<br />
</form>
<p id="sampleOutput">
【出力欄】
<br />
名前：<span id="sampleOutputName"></span>
<br />
地域：<span id="sampleOutputArea"></span>
<br />
【入力欄】のフォーム部品要素数：<span id="sampleOutputLength"></span>
</p>
【入力欄】
<br />
名前：<input type="text" value="太郎">
<br />
地域：
<select>
<option selected>関東</option>
<option>東海</option>
<option>関西</option>
</select>
<br />
</form>
<p id="sampleOutput">
【出力欄】
<br />
名前：<span id="sampleOutputName"></span>
<br />
地域：<span id="sampleOutputArea"></span>
<br />
【入力欄】のフォーム部品要素数：<span id="sampleOutputLength"></span>
</p>
CSS
<style>
#sampleForm,
#sampleOutput {
width: 500px;
margin: 10px;
padding: 10px;
border: 1px solid gray;
border-radius: 10px;
}
#sampleForm * {
margin: 0;
}
</style>
#sampleForm,
#sampleOutput {
width: 500px;
margin: 10px;
padding: 10px;
border: 1px solid gray;
border-radius: 10px;
}
#sampleForm * {
margin: 0;
}
</style>