フォーム(ボタン編)

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の内容がボタンに表示されます.

  3. Radio Button:
  4. ラジオボタンを表示するには,
    	<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つしか選択できません.

  5. Check Button(box):
  6. 次にチェックボタンについて説明します.チェックボタンは,ラジオボタンと異なり,複数の選択が可能です.チェックボタン(チェックボックス)を表示するタグは,
    	<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="押されたときの処理"

    【実行してみよう】

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

    【例】

    	<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ボタンを押して下さい!
    おもしろい
    ふつう
    つまらない

  5. Check Button( Box )
  6. 【例】

    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