入力フォーム

フォームタグでアンケートを作り
Ｅメールで自分宛てに届くようにしてみましょう。

ブラウザをネットスケープ・ナビゲータ 2.0以上でこの画面をご覧の方は実際に送ることができます。尚、インターネットエクスプローラでご覧の方は送信ボタンを押すとメーラーが立ち上がり送ることができません。理由は一番下にある「注意事項」をお読み下さい。（試して頂くとわかります。）

アンケートにご協力下さい！！

上記のアンケートのフォームタグは、次のように書かれています。

<HTML>
<HEAD>
<TITLE>アンケート</TITLE>
</HEAD>
<BODY BGCOLOR="#ffb5b5">
<CENTER>
<H1>アンケートにご協力下さい！！</H1>
<BR><BR>
<HR>
</CENTER>
<FORM ACTION="mailto:貴方のメールアドレス" ENCTYPE="text/plain" METHOD="POST">

１．貴方のお名前は？<BR><BR>
<INPUT TYPE="text" NAME="name" SIZE="20"><P>

２．Ｅメールアドレスは？<BR><BR>
<INPUT TYPE="text" NAME="email" SIZE="40"><P>

３．性別は？<BR><BR>
<INPUT TYPE="radio" NAME="sex" VALUE="m" CHECKED>男性
<INPUT TYPE="radio" NAME="sex" VALUE="w">女性<P>

４．年齢は？<BR><BR>
<SELECT NAME="age">
<OPTION VALUE="10~">１０～１９
<OPTION VALUE="20~">２０～２９
<OPTION VALUE="30~" SELECTED>３０～３９
<OPTION VALUE="40~">４０～４９
<OPTION VALUE="50~">５０～５９
<OPTION VALUE="60~">６０以上
</SELECT><P>

５．貴方の趣味は？（複数選択可）<BR><BR>
<INPUT TYPE="checkbox" NAME="syumi" VALUE="パソコン">パソコン
<INPUT TYPE="checkbox" NAME="syumi" VALUE="映画">映画鑑賞
<INPUT TYPE="checkbox" NAME="syumi" VALUE="音楽">音楽鑑賞
<INPUT TYPE="checkbox" NAME="syumi" VALUE="ジョキング">ジョキング
<INPUT TYPE="checkbox" NAME="syumi" VALUE="ドライブ">ドライブ
<INPUT TYPE="checkbox" NAME="syumi" VALUE="お酒">お酒<BR>
<INPUT TYPE="checkbox" NAME="syumi" VALUE="釣り">釣り
<INPUT TYPE="checkbox" NAME="syumi" VALUE="スポーツ">スポーツ
<INPUT TYPE="checkbox" NAME="syumi" VALUE="収集">収集
<INPUT TYPE="checkbox" NAME="syumi" VALUE="その他">その他<P>

６．ご意見・ご感想などコメントをお願いします。<BR><BR>
<TEXTAREA NAME="comment" ROWS="5" COLS="60">
</TEXTAREA><P>

７．内容をご確認の上送信ボタンを押して下さい。<BR><BR>
<INPUT TYPE="submit" VALUE="送信">
<INPUT TYPE="reset" VALUE="リセット"><P>

</FORM>
</BODY>
</HTML>

それでは、順追って解説しましょう。

基本構造<FORM>..........</FORM>

フォームの基本的なタグで、「ＡＣＴＩＯＮ」属性と「ＭＥＴＨＯＤ」属性を指定します。この間に入力ボックスや、ラジオボタン、チェックボックスなどを表示するタグを書き込みます。

「ＡＣＴＩＯＮ」属性
「ＡＣＴＩＯＮ」属性にはデータを渡す"ＵＲＬ"（ここでは、"mailto:Ｅメールアドレス"）を指定します。必ず必要な属性です。
「ＭＥＴＨＯＤ」属性
「ＭＥＴＨＯＤ」属性には"ＰＯＳＴ"か"ＧＥＴ"を指定します。属性を指定しないと、"ＧＥＴ"を指定したものとして動作します。"ＧＥＴ"の場合コード化されて"ＵＲＬ"の中に埋め込まれた情報はそのままのかたちで直接プログラムに渡され、"ＰＯＳＴ"の場合は"ＵＲＬ"と入力データ部分が分離されてプログラムに渡されます。通常、"ＰＯＳＴ"の方がよりたくさんの量の情報を扱えるのでよく使われます。一部のブラウザで大文字でないといけない場合があるみたいなのでここは大文字にしておいた方が無難です。
「ＥＮＣＴＹＰＥ」属性
「ＥＮＣＴＹＰＥ」属性には記入フォームの内容をエンコードする方法を指定します。これは「ＭＥＴＨＯＤ」属性が"ＰＯＳＴ"に設定されている場合のみ適用されます。

１．の項目を表示するタグ

<INPUT TYPE="text" NAME="***" VALUE="***" SIZE="***" MAXLENGTH="***">

TYPE="text"属性
テキスト入力欄を作ることができます。
NAME="***"属性
データを引き出すためのキーワードです。必ず指定して下さい。（ここでは、name）
VALUE="***"属性
入力欄にあらかじめ文字を表示させることができます。（ここでは、使用していない。）
SIZE="***"属性
入力欄の横幅を半角の文字数で指定できます。（ここでは、半角２０文字分の幅）
MAXLENGTH="***"属性
入力できる最大文字数を指定します。（ここでは、使用していない。）

２．の項目を表示するタグ

基本的には１．の項目と変わらず、NAME="email"、SIZE="40" に変えただけである。

３．の項目を表示するタグ

<INPUT TYPE="text" NAME="***" VALUE="***" CHECKED>

TYPE="radio"属性
単一選択できるラジオボタンを作ることができます。
NAME="***"属性
データを引き出すためのキーワードです。必ず指定して下さい。（ここでは、sex）
VALUE="***"属性
サーバに送られる文字（メールで送られる文字）。（ここでは、m または w）
CHECKED属性
指定しておくと、あらかじめ選択された状態になります。

４．の項目を表示するタグ

<SELECT NAME="***" SIZE="***" MULTIPLE>
<OPTION VALUE="***" SELECTED>
</SELECT>

<SELECT>タグは？
プルダウン形式、ウィンドウ形式どちらかにで選択メニューを表示します。
NAME="***"属性
データを引き出すためのキーワードです。必ず指定して下さい。（ここでは、age）
SIZE="***"属性
選択メニューの行数を指定できます。SIZE="***"属性を指定しないと、プルダウン形式の選択メニューを表示します。（ここでは、指定してません。）
MULTIPLE属性
指定すると複数選択ができるようになります。（ここでは、使用していない。）
<OPTION>タグは？
選択メニューの選択肢を表示します。<OPTION>の後ろに書かれた文字が選択肢となります。
VALUE="***"属性
サーバに送られる文字です。（ここでは、10~、20~、30~・・・など）
SELECTED属性
指定しておくとあらかじめそれが選択された状態になります。

５．の項目を表示するタグ

<INPUT TYPE="checkbox" NAME="***" VALUE="***">

TYPE="checkbox"属性
複数選択できるチェックボックスを作ることができます。
NAME="***"属性
データを引き出すためのキーワードです。必ず指定して下さい。（ここでは、syumi）
VALUE="***"属性
サーバに送られる文字（メールで送られる文字）。（ここでは、パソコン、映画など・・・）
CHECKED属性
指定しておくと、あらかじめ選択された状態になります。

６．の項目を表示するタグ

<TEXTAREA NAME="***" ROWS="***" COLS="***">
</TEXTAREA>

NAME="***"属性
データを引き出すためのキーワードです。必ず指定して下さい。（ここでは、comment）
ROWS="***"属性
入力欄の行数を指定します。（ここでは、5）
COLS="***"属性
入力欄の横幅をしていします。（ここでは、60）

７．の項目を表示するタグ

<INPUT TYPE="submit" VALUE="***">
<INPUT TYPE="reset" VALUE="***">

TYPE="submit"属性
データを送るためのボタンを作ります。
VALUE="***"属性
ボタンに表示する文字。（ここでは、送信）
TYPE="reset"属性
入力したデータを全て消すボタンを作ります。
VALUE="***"属性
ボタンに表示する文字。（ここでは、リセット）

注意事項: 今回Ｅメールでアンケートを送るようにしているが、これはブラウザがネットスケープナビゲータの時だけ有効でインターネットエクスプローラの場合は ACTION="mailto:メールアドレス"の属性は使えずＣＧＩという技術を使うしかありません。ＣＧＩについては、ＣＧＩ講座を参照して下さい。また、ＣＧＩを使わず送られてきたメールは文字化けしていますのでコード変換して解読する必要があります。解読方法は、次の項で解説します。