formObject.elementsコレクション

投稿日: 2013年12月27日作成者: alphasis

formObject.elementsは、form要素（フォーム要素）内のフォーム部品要素のコレクション。

構文

$formObject.elements[];

例

$formObject.elements[0]; // １つ目のフォーム部品要素への参照
$formObject.elements[1]; // ２つ目のフォーム部品要素への参照

$formObject.elements[0].value; // １つ目のフォーム部品要素の値

サンプル

【出力欄】
名前：
地域：

サンプルの動作について

【入力欄】の「名前：」の右横のテキスト入力欄の内容を変更すると、テキスト入力欄の内容を、【出力欄】の「名前：」の右横に表示する。
【入力欄】の「地域：」の右横のセレクトボックスで地域を選択すると、選択した地域名を、【出力欄】の「地域：」の右横に表示する。

サンプルのソースコード

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();
};
}
}
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>
</p>

CSS

<style>
#sampleForm,
#sampleOutput {
width: 500px;
margin: 10px;
padding: 10px;
border: 1px solid gray;
border-radius: 10px;
}
#sampleForm * {
margin: 0;
}
</style>

カテゴリー: DOM, Formオブジェクト, JavaScript, コレクション, リファレンスパーマリンク