フォーム(入力ボックス編)

Index Back Next

【入力ボックス】

ボタンStep 7で説明したボタン以外に,文字や数値などを入力できるフォームがあるので,ここではそれらについて説明します.

  1. 文字入力ボックス(1行)
  2. 文字入力ボックスを作成するタグは,.
    	<FORM>
    	<INPUT NAME="Input" SIZE=30 MAXLENGTH=15 VALUE="文字入力ボックス">
    	</FORM>
    	
    	
    
    とします.NAMEオプションは入力欄の名前,SIZEオプションは入力ボックスの表示幅,MAXLENGTHオプションは入力できる最大文字数,VALUEオプションは入力欄に前もって表示するテキストです.

  3. 文字入力ボックス(複数行)
  4. 複数行の文字入力ボックスを作成するには,
    	<FORM>
    	<TEXTAREA NAME="Input" ROWS=3 COLS=40>文字入力ボックス(複数行)</TEXTAREA>
    	</FORM>
    	
    	
    
    とします.NAMEオプションは入力欄の名前,ROWSオプションは縦幅を表す行数,COLSは横幅を表す半角文字数を設定します.

  5. パスワード入力ボックス
  6. パスワード入力ボックスを作成するタグは,
    	<FORM>
    	<INPUT TYPE=PASSWORD NAME="Pass" SIZE=8 MAXLENGTH=8>
    	</FORM>
    
    	
    
    とします.TYPEオプションはパスワード入力欄に設定するためのものです,SIZEオプションは入力ボックスの表示幅,MAXLENGTHオプションは入力できる最大文字数です.


    以上のフォームを利用してプログラムを作成してみよう!

  1. 文字入力ボックス(1行)
  2. 文字入力ボックスとJavaScriptを使用して,簡単な商品注文の見積もりのプログラムを作成します.

    [例]

    	<SCRIPT LANGUAGE="JavaScript">
    	<!--
    	function Caliculate(){		//(1)
    		var sum = 0;
    		sum = 100 * document.Mitsumori.val1.value +  
    				50 * document.Mitsumori.val2.value + 
    					200 * document.Mitsumori.val3.value;	//(2)	
    		alert( "合計=" + sum + "円です." );	 
    	}
    	//-->
    	</SCRIPT>
    	
    	見積もりをします.<P>
    	<FORM NAME="Mitsumori" >	//(3)
    	鉛筆 1ヶ 100円<BR>
    	<INPUT NAME="val1" SIZE=6 MAXLENGTH=3>ヶ<P>
    	消しゴム 1ヶ 50円<BR>
    	<INPUT NAME="val2" SIZE=6 MAXLENGTH=3>ヶ<P>
    	定規 1ヶ 200円<BR>
    	<INPUT NAME="val3" SIZE=6 MAXLENGTH=3>ヶ<P>
    	<INPUT TYPE=button VALUE="見積もり" onClick="Caliculate()">	//(4)
    	<INPUT TYPE=RESET VALUE="Clear">		//(5)
    	</FORM>
    

    【解説】

    (1)合計金額を算出する関数.
    (2)"Mitsumori"という名のフォーム内にある"val1"という名のテキストボックスのvalueという意味.
    (3)フォームの設定.
    (4)見積もりボタンを押すと,Caliculate()を呼び出す.
    (5)フォームの入力内容をリセット.

    【実行してみよう】

    見積もりをします.

    鉛筆 1ヶ 100円

    消しゴム 1ヶ 50円

    定規 1ヶ 200円

  3. 文字入力ボックス(複数行)
  4. [例]

    	<SCRIPT LANGUAGE="JavaScript">
    	<!--
    	function MsgDisplay(){		//(1)
    		document.Hukusuu.MSGText.value = "こんにちは\n私の名前は\nもりかわもとなりです.";
    	}
    	//-->
    	</SCRIPT>
    
    	<FORM NAME="Hukusuu" >		//(2)
    	<TEXTAREA NAME="MSGText" ROWS=5 COLS=40></TEXTAREA>
    	<INPUT TYPE=button VALUE="表示" ONCLICK="MsgDisplay()">		//(3)
    	<INPUT TYPE=RESET VALUE="Clear">
    	</FORM>
    

    複数行の入力ボックスへ文字を出力します.

    【解説】

    (1)文字表示関数
    (2)フォームの設定
    (3)表示ボタンが押されるとMsgDisplay()が呼び出される.

    【実行してみよう】

  5. パスワード入力ボックス
  6. パスワードを登録し(ここで言う登録とは一時的に,パスワードを変数に格納するだけなので,次回このページに来たときは,もう一度登録しなければなりません.),新規のページへ進むためにパスワードチェックを行うプログラムを作成します.

    [例]

    	<SCRIPT LANGUAGE="JavaScript">
    	<!--
    	var pw="aaaaaaaaaa"
    	function NewPage(){		//(1)
    		document.open();
    		document.write( "<HTML><HEAD>" );
    		document.write( "<TITLE>Password</TITLE></HEAD><BODY bgcolor='white'>" );
    		document.write( "<H1>ようこそ秘密のぺーじへ.</H1><BR>" );
    		document.write( "<A HREF='js07.html'>戻る</A>");
    		document.write( "</BODY></HTML>" );
    		document.close();
    	}
    	function Touroku(){		//(2)
    		pw=document.Pass.val1.value;
    		alert( "登録しました" );
    	}
    	function ChckPass(){		//(3)
    		if( pw == document.Pass.val2.value) NewPage(); 
    		else alert( "Passwordが違います" );
    	}
    	//-->
    	</SCRIPT>
    	
    	<FORM NAME="Pass" >
    	まずこちらへ登録して下さい.<P>
    	<INPUT TYPE=PASSWORD NAME="val1" SIZE=8 MAXLENGTH=8>
    	<INPUT TYPE=button VALUE="登録" ONCLICK="Touroku()"><P>	//(4)
    	登録したパスワードを入力しGo!を押して下さい.<P>
    	<INPUT TYPE=PASSWORD NAME="val2" SIZE=8 MAXLENGTH=8>	//(5)
    	<INPUT TYPE=button VALUE="Go!"ONCLICK="ChckPass()">
    	</FORM>
    

    複数行の入力ボックスへ文字を出力します.

    【解説】

    (1)新しいページ作成関数
    (2)パスワード登録関数
    (3)新しいページへ行くためのパスワード確認の関数
    (4)登録ボタンが押されるとTouroku()を呼び出す.
    (5)Go!ボタンが押されるとChckPass()を呼び出す.

    【実行してみよう】

    まずこちらへ登録して下さい.

    登録したパスワードを入力しGo!を押して下さい.


1998(C) Motonari Morikawa