formオブジェクト

JavaScript 基礎 授業



form部品のアクセス


  • formオブジェクトの下位階層にある



フォーム部品の活用


  • フォーム部品のアクセス

ソースコード【 JavaScript 】

document.myForm.height.value
    • myForm：formオブジェクト
    • height：textオブジェクト
    • value：valueプロパティ（テキストボックス内の文字列を表す）

  • valueプロパティを読み出せば、テキストボックスの文字列を取り出せる
  • valueプロパティに値を代入すれば、テキストボックスに表示する文字を変更できる



自分自身を示す thisプロパティ


  • 自分自身を示す特殊なプロパティ
  • 引数に「this.form」を渡すことにより、呼び出された関数は「フォームの各部品にフォームの階層からアクセスできる」ようになる
  • 引数に「this.form」を渡さない場合、「document.myForm.height.value」のようにdocumentオブジェクトの階層から指定しなければならなくなり複雑になる


ソースコード【 HTML 】

  • 小数点の処理は設定していません
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームの利用</title>

<script>

function stdWeight(myForm) {
	var height, weight;
		
	height = Number(myForm.height.value);
	if(myForm.sex[0].checked){
		weight = (height - 80) * 0.7;
	
	}else {
		weight = (height - 70) * 0.6;
	}
	
	myForm.weight.value = weight;

        // 小数点切り下げ
	//myForm.weight.value = Math.ceil(weight);

}

</script>

</head>
<body>

<form name="weightForm">

<p>男性:<input type="radio" name="sex" cheked> 女性:<input type="radio" name="sex"></p>

<p>身長:<input type="text" name="height">cm</p>

<p><input type="button" value="計算" name="calc" onclick="stdWeight(this.form)"></p>

<p>標準体重:<input type="text" name="weight">kg</p>

</form>

</body>
</html>


ブラウザで表示


  • 166と記入