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

Index  Back  Next
【入力ボックス】

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

1. 文字入力ボックス( 1行 )

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


2. 文字入力ボックス( 複数行 )

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


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

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

　以上のフォームを利用してプログラムを作成してみよう！
1. 文字入力ボックス( 1行 )

　　文字入力ボックスと JavaScript を使用して、簡単な商品注文の見積もりのプロ
　グラムを作成します。
　　<SCRIPT TYPE="text/JavaScript">
　　<--
　　function Cali()　　　　// (1)
　　{
　　　　var sum = 0;
　　　　sum = 100 * document.mitsu.v1.value +
　　　　      50  * document.mitsu.v2.value +
　　　　      200 * document.mitsu.v3.value;　　// (2)
　　　　alert( "合計=" + sum + "円です。" );
　　}
　　//-->
　　</SCRIPT>

　　<FORM NAME="mitsu"> 　　// (3)
　　　　鉛筆　　　1ヶ 100円<BR>
　　　　<INPUT NAME="v1" SIZE="6" MAXLENGTH="3">ヶ<BR>
　　　　消しゴム　1ヶ 50円<BR>
　　　　<INPUT NAME="v2" SIZE="6" MAXLENGTH="3">ヶ<BR>
　　　　定規　　　1ヶ 200円<BR>
　　　　<INPUT NAME="v3" SIZE="6" MAXLENGTH="3">ヶ<BR><BR>
　　　　<INPUT TYPE="BUTTON" VALUE="見積もり" onClick="Cali();"> //(4)
　　　　<INPUT TYPE="RESET" VALUE="Clear">　　//(5)
　　</FORM>
【解説】

　(1) 合計金額を算出する関数。
　(2) "mitsu" という名のフォーム内にある "v1" という名のテキストボックスの
　    value という意味。
　(3) フォームの設定。
　(4) 見積もりボタンを押すと、Cali() を呼び出す。
　(5) フォームの入力内容をリセット。
【実行してみよう】

　　見積もりをします。
鉛筆　　　1ヶ 100円
ヶ
消しゴム　1ヶ 50円
ヶ
定規　　　1ヶ 200円
ヶ

2. 文字入力ボックス( 複数行 )

　　複数行の入力ボックスへ文字を出力するプログラムを作成します。
　　<SCRIPT TYPE="text/JavaScript">
　　<--
　　function MsgDisplay()　　　　// (1)
　　{
　　　　document.fuku.msg.value = "こんにちは\n私は山田太郎です。";
　　}
　　//-->
　　</SCRIPT>

　　<FORM NAME="fuku"> 　　// (2)
　　　　<TEXTAREA NAME="msg" ROWS="3" COLS="40">
　　　　</TEXTAREA>
　　　　<INPUT TYPE="button" VALUE="表示" ONCLICK="MsgDisplay();"> //(3)
　　　　<INPUT TYPE="RESET" VALUE="Clear">
　　</FORM>
【解説】

　(1) 文字表示関数
　(2) フォームの設定
　(3) 表示ボタンが押されると MsgDisplay() が呼び出される。
【実行してみよう】

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

　　パスワードを登録し( ここで言う登録とは一時的に、パスワードを変数に格納する
　だけなので、次回このページに来たときは、もう一度登録しなければなりません )、
　新規のページへ進むためにパスワードチェックを行うプログラムを作成します。
　　<SCRIPT TYPE="text/JavaScript">
　　<--
　　var pw = "aaaaaaaaaa";
　　function NewPage()　　　　// (1)
　　{
　　　　document.open();
　　　　document.write( "<;HTML><HEAD>" );
　　　　document.write( "<TITLE>Password</TITLE>" );
　　　　document.write( "</HEAD><BODY>" );
　　　　document.write( "<H1>ようこそ秘密のぺーじへ。</H1><BR>" );
　　　　document.write( "<A HREF='js08.html'>戻る</A>" );
　　　　document.write( "</BODY></HTML>" );
　　　　document.close();
　　}
　　function Tou()　　　　// (2)
　　{
　　　　pw = document.pass.val1.value;
　　　　alert( "登録しました" );
　　}
　　function Chk()　　　　// (3)
　　{
　　　　if( pw == document.pass.val2.value ) {
　　　　　　NewPage();
　　　　} else {
　　　　　　alert( "Password が違います" );
　　　　}
　　}
　　//-->
　　</SCRIPT>

　　<FORM NAME="pass">
　　　　まずこちらへ登録して下さい。<BR>
　　　　<INPUT TYPE="PASSWORD" NAME="val1" SIZE="8" MAXLENGTH="8">
　　　　<INPUT TYPE="BUTTON" VALUE="登録" ONCLICK="Tou();"><BR>　// (4)
　　　　登録したパスワードを入力し Go! を押して下さい。<BR>
　　　　<INPUT TYPE="PASSWORD" NAME="val2" SIZE="8" MAXLENGTH="8">
　　　　<INPUT TYPE="BUTTON" VALUE="Go!" ONCLICK="Chk();"> 　　　// (5)
　　</FORM>
【解説】

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

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

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