フォーム（ボタン編）

Index Back Next

【ボタン】

フォームのボタンとJavaScript絡めたHTMLを作成するために，まず，簡単にボタンを使用するためのタグについて説明します．

  1. Push Button:

    2. 以下のタグでPush Buttonを作成します．また， 
    	<FORM>
	<INPUT TYPE=button NAME="pBtn" VALUE="PUSH BUTTON" ONCLICK="">
	</FORM>
    INPUT TYPEを"submit"とするとフォームの内容を転送する転送ボタン，"reset"とするとフォームに記入した情報をリセットするリセットボタンとなります．そしてVALUEの内容がボタンに表示されます．

  2. Radio Button:

    3. ラジオボタンを表示するには， 
    	<FORM>
	<INPUT TYPE=radio NAME="rBtn" Checked VALUE="1" ONCLICK="">ボタン1
	<INPUT TYPE=radio NAME="rBtn" VALUE="2" ONCLICK="">ボタン2
	<INPUT TYPE=radio NAME="rBtn" VALUE="3" ONCLICK="">ボタン3
	</FORM>

	ボタン1
	ボタン2
	ボタン3
    といったようにします．ラジオボタンは1つしか選択できません．

  3. Check Button(box):

    4. 次にチェックボタンについて説明します．チェックボタンは，ラジオボタンと異なり，複数の選択が可能です．チェックボタン（チェックボックス）を表示するタグは， 
    	<FORM>
	<INPUT TYPE=checkbox NAME="cBox" Checked VALUE="1" ONCLICK="">チェック1	
	<INPUT TYPE=checkbox NAME="cBox" VALUE="2" ONCLICK="">チェック2
	<INPUT TYPE=checkbox NAME="cBox" VALUE="3" ONCLICK="">チェック3
	</FORM>
	
	チェック1	
	チェック2
	チェック3
    となります．

では，実際にフォームのボタンとJavaScriptを連動させてみましょう．

  1. Push Button

    2. プッシュボタンを押すと，新たなページを開きHelloと表示するプログラムです．

    ［例］

    	<SCRIPT LANGUAGE="JavaScript">
	<!--
	function Push(){		//Buttonが押されたときの処理
		document.open();		//(1)
		document.write( "<;HTML><HEAD>" );
		document.write( "<TITLE>結果（押してね！）</TITLE></HEAD><BODY bgcolor='white'>" );
		document.write( "<H1>Hello</H1><BR>" );
		document.write( "<A HREF='js07.html'>戻る</A>" );
		document.write( "</BODY></HTML>" );
		document.close();		//(2)
	}
	//-->
	</SCRIPT>
	
	<FORM NAME="pb">	//(3)
	<INPUT TYPE=BUTTON VALUE="Hello" ONCLICK="Push();">
	</FORM>

    【解説】

    (1)documentオブジェクトのopenメソッドです．ドキュメントを開きます．
    (2)documentオブジェクトのcloseメソッドです．ドキュメントを閉じます．
    (3)FORM（BUTTON)の設定．ONCLICK="押されたときの処理"

    【実行してみよう】

  2. Radio Button

    3. チェックされたラジオボタンの内容をアラートダイアログで表示するプログラムを作成します．

    【例】

    	<SCRIPT LANGUAGE="JavaScript">
	<!--
	var rMsg = "";
	function rChck( a ){		//(1)
		rMsg = a.value;
	}
	function Ok(){			//(2)
		if( rMsg == "" ) rMsg="ラジオボタンをチェックしてください！"	//(3)
		alert( rMsg );		//(4)
	}
	//-->
	</SCRIPT>
	このぺーじの感想を選んで，Okボタンを押して下さい！
	<FORM NAME="rb">		//(5)
	<INPUT TYPE=radio NAME="rBtn" VALUE="おもしろい" ONCLICK="rChck(this);" > おもしろい<BR>
	<INPUT TYPE=radio NAME="rBtn" VALUE="ふつう" ONCLICK="rChck(this);" > ふつう<BR>
	<INPUT TYPE=radio NAME="rBtn" VALUE="つまらない" ONCLICK="rChck(this);" > つまらない<P>
	<INPUT TYPE=button NAME="OkBtn" VALUE="Ok" ONCLICK="Ok();">
	</FORM>

    【解説】

    (1)ラジオボタンをチェックしたときに実行される関数で，rMsgにチェックボタンのValueを格納します
    (2)Ok(push　button）ボタンが押されたときに実行される関数で，アラートダイアログrMsgの内容を表示します
    (3)どのラジオボタンもチェックされずに，Okボタンが押されたときに表示するメッセージです．
    (4)アラート関数．アラートダイアログによりメッセージを表示します．

    (5)各ボタンの設定．

    【実行してみよう】

    このぺーじの感想を選んで，Okボタンを押して下さい！
    おもしろい
    ふつう
    つまらない

  3. Check Button( Box )

    4. 【例】

    Okボタンを押すことにより，選択したチェックボタンの内容がアラートダイアログに表示されます． 
    	<script language="JavaScript">
	<!--
	var msg="";
	function OkBtn(){
		var i;
		for( i = 0; i < document.cb.elements.length; i++ ){		//(1)
			if( document.cb.elements[i].checked )				//(2)
				msg += document.cb.elements[i].value + "\n";	//(3)
		}
		alert("あなたの理想のタイプは\n"+ msg +"ですね？");	//(4)
		msg="";
	}
	//-->
	</script>
	あなたの理想のタイプは？
	<form name="cb">			//(5)
	<input type=checkbox name="cBox" value="やさしい">やさしい	
	<input type=checkbox name="cBox" value="おもしろい">おもしろい
	<input type=checkbox name="cBox" value="あたまがいい">あたまがいい
	<input type=checkbox name="cBox" value="スポーツマン">スポーツマン
	<input type=checkbox name="cBox" value="お金持ち">お金持ち<p>
	<input type=button name="OkBottun" value="Ok" onclick="OkBtn()">
	</form>

    【解説】

    (1)チェックボタンエレメントの個数だけループを繰り返します．
    (2)チェックボタンがチェックされているかどうかをチェックします．
    (3)\nとはエスケープ文字で改行を表します．その他に，タブを表す\t，"を表示するための\"などがあります．
    (4)メッセージ表示
    (5)フォーム（ボタン）の設定．

    【実行してみよう】

    あなたの理想のタイプは？
    やさしい おもしろい あたまがいい スポーツマン お金持ち

1998(C) Motonari Morikawa