目次：
【第13回】JavaScript 3 (イベント検出、マルチメディア情報の応用、プログラミングTIPS）

第1章

第3章

<form>タグでイベント処理

【本節の目的】
ここでは、<form>というHTMLのタグにより、イベント処理を行なう方法の概略を紹介します。この方法が、イベント処理としては一般的です。

<form>タグってどんなの？

<form>タグは、ブラウザからデータを入力してもらうためにあるHTMLタグです。

一般的には、以下のような形式で利用します。 (この一般形は、興味が無ければ、飛ばしてもらっても結構です。)

 <form action="実行するプログラム">
   <input type="入力形式1" name="変数名1" value="変数1の値">
   <input type="入力形式2" name="変数名2" value="変数2の値">
     .
     .
 </form>

action 属性は、処理を依頼するプログラムを指定します。
<form>タグには、必ず<input>タグが必要です。これにより、
type 属性は、ボタンなどの種類を指定します。これにより、全く見た目や機能の違う入力形式を選択できます。
name 属性は、type 属性に関連した変数の名前を指定します。 type 属性の種類によっては、この値自体がブラウザ上に現れます。例えば、type="button" では、ボタンの名前となります。
value 属性は、name 属性で指定された変数の値を指定します。ただし、type 属性によって、必要無い場合もあります (例えば、type="button")。

この<form>タグの典型的な利用例が、以下のHTMLです。これを皆さんのHTMLに含むだけで、第8回で説明したHTMLチェッカが簡単に利用できるようになります。

(註)下記のhtmlファイルはローカルに置いたままだと"HTMLチェッカ"は利用できません。
Webサーバ(st.gsis.kumamoto-u.ac.jp/あなたのユーザ名/public_html/）にアップロードしてから利用して下さい。

<form action="http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi" method="GET">
  <input type="HIDDEN" name="ViewSource" value="on">
  <input type="SUBMIT" value="このページのチェック">
</form>

上に示した一般形と比べると、method 属性が付いていますが、これはWebサーバにデータを送る形式を示すものです。意味はわからなくても大丈夫ですので、御心配無く。

１行目と３行目が、重要です。

まずは、３行目から説明します。
type="SUBMIT"となっていますね。これを指定すると、
「一緒にあるvalue属性の値をボタンの名前として表示し、 <form>のaction 属性で指定したプログラムに処理を依頼する」
という働きを行います。
ですから、この場合、「このページのチェック」という名前のついたボタンを作り、このボタンがクリックされたら、１行目中にある http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi を実行することになります。

次は、１行目ですが、ほぼ説明は終っていますね。
http://opnelab.ring.gr.jp/k16/htmllint/htmllint.cgi は、 openlab.ring.gr.jp というサーバ上にある htmlint.cgi というプログラムを示しています。このプログラムの働きは、皆さんご存知の通りのWebページの採点です(ずいぶん苦しめられましたか？)。

２行目も説明しておきます。
type="HIDDEN"となっていますが、これは、ブラウザ上には、何も表示せずに、サーバにデータをそっと(秘密にして)送る仕組みです。この例では、変数 ViewSource の値を on にして送っています。

これらの指示により、ボタンを押すことで皆さんの作ったWebページのチェックができたわけです。

<input>タグの type 属性

<input>タグは、先に説明しましたように type 属性により、さまざまな入力形式を実現することができます。

典型的で、皆さんが良く使うと思われるのは、'button'、'text'、 'radio'だと思われます。これら３つの利用例を示します。

(註)下の3つの例をブラウザ上で表示(実行)しても、文字入力やボタンにチェックはできますが、何も起こりません。

1. type="buttun" (ボタン：一般的なボタンです。)

 <form>
   <input type="button" value="はい">
   <input type="button" value="いいえ">
 </form>

value 属性は、ボタンの名前(説明)として表示されます。

上記のブラウザ上の表示は、以下のようになります。

2.type="text" (テキスト入力フィールド：テキストを入力するフィールドです。)

 <form>
    <input type="text" name="shimei" value="熊大 太郎">
 </form>

name 属性の値は、このフィールドを表す変数名となりますので、わかりやすい名前を適当に付けます。
　value 属性は、省略可能です。指定すると、このフィールドの初期値として、フィールド内に表示されます。

上記のブラウザ上の表示は、以下のようになります。

3. type="radio" (ラジオボタン：どれか一つを選択するボタンです。)

 <form>
   <input type="radio" name="hanndan" value="yes"> はい
   <input type="radio" name="hanndan" value="no" checked> いいえ
 </form>

name 属性は、ここのラジオボタン全体の名前を表します。 (ある質問に対する回答の選択肢のような)一つのグループ内では、すべて同じにします。
value 属性は、このボタンを表す変数名となりますので、わかりやすい名前を適当に付けて下さい。
check 属性を書いておくと、始めからその選択肢が選ばれている (チェックされている) ようになります。
ボタンの名前(説明)は、このタグの外側に書きます。つまり、通常の文章として書くことになります。

上記のブラウザ上の表示は、以下のようになります。一つの項目(ボタン)だけが選択できることを確認して下さい。

他の type 属性について調べたいときは、「とほほのWWW入門」中のここに、説明と例がありますので参照して下さい。

<form>タグ中のイベント処理

先の例で見たように、<form>タグでは、ブラウザ上にボタンを作る機能があり、そのボタンを押してもらうことにより、処理を依頼することができます。これは、先に学んだイベント処理ですよね。

ということで、前章で<a>タグで行なったように、 <form>タグでも各種イベントを取り扱うことが可能なのです。さらに、<input>では、<a>と異なり、さまざまな形の入力形式(ボタンや文字入力など)を実現できるので、 Webページ作成時のイベント処理には、通常はこちら(<form>, <input>)が利用されます。

それでは早速、上の３つの<input>タグの属性ごとに利用例を紹介します。今度は、ボタンを押すとちゃんと反応がありますよ。

type="button" (通常、onClick イベントハンドラを利用します)

まずは、以下のボタンを押してみて下さい。

「はい」と「いいえ」のどちらを押しても、ダイアログが出て来ましたよね。これは、以下のような文でできています。

 <form>
   <input type="button" value="はい" onClick="alert('良い選択ですね。')">
   <input type="button" value="いいえ"
      onClick="alert('あなたは、なかなかできた人ですね。')">
 </form>

前章の<a>タグのときと同様に、 <input>タグ中に onClick="..." と指定して、イベント処理を行なっていることがわかります。
行いたい処理を定義し、 alert()のところを、その定義したメソッド名にすることで、ボタンを押したときの動作を変えることができます。これは、前章の<a>タグのときに説明しましたよね。
次の type="text" の所にもありますから、参照して下さい。
onClick以外のイベントハンドラとの組み合わせも可能ですが、皆さんのページを見てくれた人に混乱を与えることになるので、通常はやめた方が良いでしょう。

type="text" (通常は、buttonと一緒に利用します)

「熊大太郎」を消して、あなたの名前を入力した後、ボタンを押してみて下さい。

あなたに(あなたの名前に対して)、メッセージが現れましたね。これは、以下のような文でできています。

 <script type="text/javascript">
   <!--
     function henji() {
       namae = document.sample1.shimei.value;
       kotoba = namae + "さん、こんにちは。頑張ってますね。";
       alert(kotoba);
     }
   //-->
 </script>

 <form name="sample1">
   お名前は？
   <input type="text" name="shimei" value="熊大 太郎">
   <input type="button"  value="押して下さい"
	  onClick="henji()">
 </form>

まずは、後半の<form>および<input>タグの部分の説明をしましょう。

<form>タグに、 name 属性が付いていますね。この値(sample1)は、 <form>タグを区別するための名前です。適当な名前を付けます。
これまでのサンプルでは、とくに<form>タグを区別する必要が無かったので、付けていませんでした。(付けても良かったのですが、無視されます。) この文でname 属性が必要な理由の説明は、前半のJavaScript部分の解説をするときに行います。

「お名前は？」というところは、単なる文字ですので、そのまま表示されます。

次の <input type="text" ...> の行は、先に示した例と全く同じです。

ところで、このフィールドの値は、

「(この<input>タグの) name属性の値.value 」
という形で表すことができるようになっています。大雑把に別の言い方をすると、

<form>オブジェクトの一つの属性(値)
として設定されている、ということもできます。 (正確な表現は、前半のJavaScript部分の解説のところで説明します。)
つまり、この例文では、 > shimei.value に、フィールド(shimei)の値(初期値は、「熊本太郎」) が格納されています。

また、前の「お名前は？」との間に、 <br>などの改行タグがありませんので改行せずに、そのまま入力フィールドが表示されています。

次の <input type="button" ...> の行は、一般的なものですので、説明の必要は無いでしょう。
ボタンがクリックされると、自作のhenji() というメソッドが実行されます。

次は、JavaScriptで処理を定義した前半部分の説明です。

古いブラウザでエラーが出ないように、全体をコメントタグで囲んであります。

function henji() { の行は、対応する '}'が来るまで、 henji()というメソッド(処理)の定義であることを示しています。

document.sample1.shimei.value は、いま開いているブラウザ(document)の中の、 'sample1'という名前の<form>タグ中の、 'shimei'という名前のフィールドの値(value)ということになります。オブジェクトを中心としたJavaScriptでの表現の一つです。

上記の値を、'namae'という変数に代入し、次の行で、その値に、 "さん、こんにちは。頑張ってますね。" という文を追加して、 'kotoba' という変数に代入しています。

最後に、'kotoba'に代入されたメッセージを、 alert()で表示しています。

type="radio"
(テキストフィールドに、メッセージを出力するサンプルを示します。)

まずは、どれかボタンを押して見て下さい。

メッセージの欄に、何かメッセージが出たと思います。これは、以下のような文でできています。

 <script type="text/javascript">
   <!--
    function genki(joutai) {
      if (joutai == 0) {
	 mesg = 'あなたは、立派です！';
      } else if (joutai == 1) {
	 mesg = 'それじゃ、元気が出ないんじゃない？';
      } else if (joutai == 2) {
	 mesg = 'しかたないよね、夜が遅いからね！';
      }
      document.sample2.kekka.value = mesg;
    }
   //-->
 </script>
 <form name="sample2">
   いつも朝食を食べていますか？
   <input type="radio" name="asago" onClick="genki(0)"> はい
   <input type="radio" name="asago" onClick="genki(1) checked"> いいえ
   <input type="radio" name="asago" onClick="genki(2)"> 気分次第
   <br><br>
   メッセージ
   <input type="text" name="kekka" size="40">
 </form>