フォーム（入力ボックス編）

Index Back Next

【入力ボックス】

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

  1. 文字入力ボックス（1行）

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

  2. 文字入力ボックス（複数行）

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

  3. パスワード入力ボックス

    4. パスワード入力ボックスを作成するタグは， 
    	<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円
    ヶ

  2. 文字入力ボックス（複数行）

    3. ［例］

    	<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()が呼び出される．

    【実行してみよう】

  3. パスワード入力ボックス

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

    ［例］

    	<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