ボタン

フォーム( ボタン編 )

【ボタン】

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

1. Push Button

　　以下のタグで Push Button を作成します。また、

　INPUT TYPE を "submit" とするとフォームの内容を転送する転送ボタン、"reset"
　とするとフォームに記入した情報をリセットするリセットボタンとなります。そして
　VALUE の内容がボタンに表示されます。

2. Radio Button

　　ラジオボタンを表示するには、

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

3. Check Button( box )

　　次にチェックボタン( チェックボックス )について説明します。チェックボタン
　は、ラジオボタンと異なり、複数の選択が可能です。チェックボタンを表示するタグ
　は、

　となります。

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

1. Push Button

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

　　<SCRIPT TYPE="text/JavaScript">
　　<--
　　function Push()　　　　// Button が押された時の処理
　　{
　　　　document.open(); 　　　// (1)
　　　　document.write( "<;HTML><HEAD>" );
　　　　document.write( "<TITLE>結果( 押してね！ )</TITLE>" );
　　　　document.write( "</HEAD><BODY>" );
　　　　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

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

　　<SCRIPT TYPE="text/JavaScript">
　　<--
　　var rMsg = "";
　　function rCheck( a )　　// (1)
　　{
　　　　rMsg = a.value;
　　}
　　function Ok() 　　// (2)
　　　　if( rMsg == "" ) {　// (3)
　　　　　　rMsg = "ラジオボタンをチェックしてください！";
　　　　}
　　　　alert( rMsg );　　　// (4)
　　}
　　//-->
　　</SCRIPT>

　　<FORM NAME="rb"> 　　　 // (5)
　　　　<INPUT TYPE="radio" NAME="rB" VALUE="おもしろい"
　　　　　　ONCLICK="rChck(this);"> おもしろい<BR>
　　　　<INPUT TYPE="radio" NAME="rB" VALUE="ふつう"
　　　　　　ONCLICK="rChck(this);"> ふつう<BR>
　　　　<INPUT TYPE="radio" NAME="rB" VALUE="つまらない"
　　　　　　ONCLICK="rChck(this);"> つまらない<BR><BR>
　　　　<INPUT TYPE="button" VALUE="Ok" ONCLICK="Ok();">
　　</FORM>

【解説】

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

【実行してみよう】

　　このぺーじの感想を選んで、Ok ボタンを押して下さい！

Check Button( Box )

【例】

　　Ok ボタンを押すことにより、選択したチェックボタンの内容がアラートダイアログ
　に表示されます。

　　<SCRIPT TYPE="text/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="c" VALUE="やさしい">やさしい
　　　　<INPUT TYPE="checkbox" NAME="c" VALUE="おもしろい">おもしろい
　　　　<INPUT TYPE="checkbox" NAME="c" VALUE="あたまがいい">あたまがいい
　　　　<INPUT TYPE="checkbox" NAME="c" VALUE="スポーツマン">スポーツマン
　　　　<INPUT TYPE="checkbox" NAME="c" VALUE="お金持ち">お金持ち<BR><BR>
　　　　<INPUT TYPE="button" VALUE="Ok" ONCLICK="OkBtn();">
　　</FORM>

【解説】

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

【実行してみよう】

あなたの理想のタイプは？