基盤的情報処理論

form要素は、Webページ閲覧者から必要な情報を入力してもらい、 それをWebサーバへ送る手助けをするHTML要素です。

「Webサーバへ情報を送る」機能は、 Webサーバ上でのプログラムも作る必要がありますが、 ここでは、「Webページ閲覧者から必要な情報を入力してもらう」機能だけを説明し利用します。

実際に「Webページ閲覧者から必要な情報を入力してもらう」機能を発揮するのは、 form要素自身では無く、その子要素として動作するform要素関連の要素です。 じつは、先週ボタンを作ったinput要素も、このform要素関連の要素なのです。 input要素以外にも、選択肢をポップアップしてくれる select要素や、 文書を入力してもらう領域を作ってくれる textarea要素など、 関連する要素がいくつかありますが、 ここでは、利用頻度の高い input要素についてだけ説明します。

一般的な、input要素の利用形式は次のようになります。

<form name="ccccc">
<input type="xxxxx" value="yyyyy" name="zzzzz" イベントハンドラ="処理名">
</form>

上記の意味は次のようになります。 実際に利用するときには、 ccccc、xxxxx、yyyyy、zzzzz 等には、適当な値を設定します。

• 「type」の値により、入力形式を変えることができます。 以下に説明する「button」、「text」、「radio」などの他に、 「file」、「checkbox」など様々なものがあります。
• 「value」を指定することで、初期データを与えることができます。
• 「name="ccccc"」がform要素の名前を表し、 「name="zzzzzz"」がinput要素の名前を表しています。
  Webページ閲覧者が入力した情報（データ）は、この場合、 「document.ccccc.zzzzz.value」で、参照することができます。

それでは、type属性を変えたときの input要素の入力形式について、学習しましょう。 ただし、ここではイベントハンドラは、省略しています。

type="button" (ボタン)

<form name="button_test">
   <input type="button" name="button_yes" value="はい">
   <input type="button" name="button_no" value="いいえ">
</form>

type属性が button の時の value 属性は、先週説明しましたように ボタンの名前(説明)としてボタン内に表示されます。

上記のHTMLをWebブラウザで表示すると以下のようになります。 （ただし、input要素が目立つように、背景色を付けています。 以下のサンプルも同様です。）

ボタンをクリックしてみてください。どうなりましたか？ （次の注意を読んでください。）

type="text" (テキスト入力フィールド)

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

name 属性の値は、このフィールドを表す変数名となりますので、 内容を表す名前を考えてつけてください。
type属性が text の時のvalue属性は省略可能です。 指定すると、テキストフィールドの初期値としてフィールド内に表示されます。

上記のHTMLをWebブラウザで表示すると以下のようになります。

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

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

type属性が radioの場合は、以下のような特徴があります。

• type属性が radioの場合、 name属性は、ここのラジオボタン全体の名前を表します。 (ある質問に対する回答の選択肢のような)一つのグループ内では、 name属性の値はすべて同じにします。
• value 属性は、このボタンを表す変数名となりますので、 内容を表す名前を考えてつけて下さい。
• checked属性を書いておくと、 始めからその選択肢が選ばれている (チェックされている) ようになります。
• ボタンの説明（意味）は、 このHTML要素の外側に書きます。 つまり、通常の文章として書くことになります。
  （上の例では、「はい」や「いいえ」がそれに対応します。）

上記のHTMLをWebブラウザで表示すると以下のようになります。

form関連要素である input要素は、type属性を buttonにすることで ブラウザ上にボタンを作ることができ、そのボタンをクリックしてもらうことにより、 処理を依頼することができます。これは、先週学んだイベント処理の応用ですね。

また、type属性を textにすると文字の入力はできますが、 それ自身とイベントハンドラを組み合わせるのは困難です。 なぜなら、「自分の入力したい文字を全部入力した」 というイベントを処理するイベントハンドラは無いからです。
そこで、type属性を textにした input要素（テキスト入力フィールド）は、 type属性をbuttonにしたボタンと組み合わせることで、 Webページを閲覧している人から文字を入力してもらうことにします。

ボタン（type="button"）と イベントハンドラの組み合わせの例

これは、前回の例題でも利用しました。

次のサンプルは、ボタンを二つ付けてみました。 今度は、ボタンをクリックしたら、なんらかの反応がありますので、 クリックしてください。

上記のボタンを作るには、次のHTMLと、

 <form name="two_buttons">
   <input type="button" value="はい" onClick="push_yes()">
   <input type="button" value="いいえ" onClick="push_no()">
 </form>

次のJavaScriptの定義があればよいですね。

function push_yes () {
  window.alert('良い選択ですね。');
}
function push_no () {
  window.alert('あなたは、なかなかできた人ですね。');
}

テキスト入力フィールド（type="text"）とボタン
及び イベントハンドラの組み合わせの例

Webページ閲覧者に文字を入力してもらい、それを使って処理をしてみましょう。

次の入力フィールドの「熊大 太郎」を消して、あなたの名前を入力した後、 ボタンを押してみて下さい。
あなたの入力した氏名に対してメッセージが表示されたでしょう？ 別の氏名（文字列）を入力しても、その氏名（文字列）に対するメッセージが表示されます。

上記は、次のHTMLにより、構成されています。

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

上記のHTMLの解説を次に示します。

• form要素の name属性の値である hello は、 form要素を識別するための名前です。 好きな名前を付けることがでますが、 HTMLファイル中で、 ユニークである（他に同じ名前のものが無い）必要があります。 このname属性の値 (この例では「hello」)が、JavaScript処理の定義中で重要な役割を果たします。
• 「お名前は？」というところは、単なる文字ですので、 そのまま表示されます。
• <input type="text" ...> の行は、 先に示した例と全く同じです。 ここでは、上のform要素のときと同様に、 name属性の値であるshimeiが、 JavaScript処理の定義中で、重要な役割を果たします。 ところで、value属性に「熊大 太郎」が指定されていますが、 これは、省略できるでしょうか？
• 次の <input type="button" ...> の行は、 もう説明の必要は無いでしょう。
  ボタンがクリックされると、 自作のhenji() という関数（メソッド）が実行されます。
  ところでボタンに表示される文字は、どれで指定するわかりますか？

JavaScript関数である henji()の定義を次に示します。

function henji() {
  namae = document.hello.shimei.value;
  kotoba = namae + "さん、こんにちは。頑張ってますね。";
  alert(kotoba);
}

上記のJavaScriptの解説を行う前に確認です。
上記JavaScriptの直前に示した、関数(メソッド) henji を利用して名前を尋ねるHTMLのサンプルにおいて、 form要素に付けた名前(name属性の値)は何でしたか？ また、type属性がtextのinput要素に付けた名前(name属性の値)は何でしたか？

それでは、上記のJavaScriptの解説を次に示します。

• document .hello .shimei.value は、 いま開いているブラウザ(document)の中の、 'hello 'という名前の form要素中の、 'shimei'という名前のフィールドの値(value)ということになります。 つまり、テキストフィールド(文字を入力する四角い枠)に入力された文字列は、 document.hello.shimei.value という変数に代入れされているのです。
• 上記の値を、'namae'という変数に代入しています。
• 次の行で、その値に、 "さん、こんにちは。頑張ってますね。" という文字列を追加した後、 'kotoba' という変数に代入しています。
  ここで用いている、'+' 記号はどのような働きをするのでしたか？
  

  'namae = ...'の行を省略して、 kotoba = document.hello.shimei.value + "さん、こんにちは。頑張ってますね。"; としても、同じ効果が得られます。

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

演習： form要素を用いた閲覧者から情報をもらう演習