HTML編 45/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
アンケートを作る
フォームの基本
1行分文字を入力させるためのフィールド




フォームの基本

インターネット自体はメールやチャットなど、双方向でコミュニケーションがとれる物なのですが、ホームページは基本的に作者から見ている人への一方通行のメディアです。もちろん「mailto:アドレス」で見に来た人から感想などをもらう手だてはありますが、それにしても実際にメールなどレスポンスをもらえるのはごくわずかでしょう。そこで、少しでも見に来た人とコミュニケーションがとれるよう、メッセージなどを直接書き込んでもらい、クリック一つで送信できるようにするHTMLタグがあります。これをフォームと言います。
しかし、このフォームというタグは現実問題HTMLとブラウザだけでは手に余る処理を必要とします。「ホームページを見る」というのは、見る人がサーバーにアクセスして、そこにしまってあるHTMLファイルと画像ファイルを持ち出し、自分のマシン上のブラウザソフトで持ってきたHTMLを元に画面を組み立てて表示しています。つまり見ている人のマシンとあなたのプロバイダのサーバの間でDATAが往復しているだけなのです。
これを、見ている人が起こしたアクションを、サーバを経由してあなたのマシンへ届けるには、サーバを動かす為の命令が必要になります。この命令をCGIと言います。つまりフォームは基本的にCGIとセットで使うタグなのです。CGIはHTMLに比べると修得が非常に難しく、またサーバに負担をかけるため使用を禁止しているプロバイダもめずらしくありません。具体的にフォームの場合、CGIを使わずに送るとどうなるかというと、日本語がすべて文字化けし、せっかく送ってもらった感想などを読むことが出来なくなります。この文字化けしたメールを日本語に変換してくれるソフトもありますが、完全には戻らないケースがあり、仮に大切なメールを頂いたとしたら、この変換ソフトに頼っていては何かしらの事故にもなりかねません。ただ、フォームメールを日本語化して送信するためのCGIは、需要が多いためか、あらかじめこれに限って使って良いとするプロバイダもありますので、もし使いたい場合はご自分のプロバイダに問い合わせてみてください。
さて、ではここで作るアンケートはCGI無しでは意味がないのか?というと、そうでもありません。なぜならフォームは日本語は不可ですが、英語ならある程度問題なく使えるからです。サンプルに使用したフォームタグは日本語情報を一切送らずに使える物だけを掲載しました。直接感想文などは受け取れないものの、これだけでもメールボタンのみよりは、気軽にレスポンスを貰いやすいのではないでしょうか?

●<FORM ACTION="n" METHOD="post">
フォームタグは<FORM>と書きます。この<FORM>から</FORM>の間にラジオボタンやプルダウンメニュー、メールアドレスを書いてもらう欄、送信ボタンなどを書き込みます。また<FORM>と</FORM>の間に他のタグや文章が入っても構いませんので、<FORM>タグ内は自由なレイアウトが可能です。
オプションタグACTIONは書き込んで貰った情報をどこに送るのかを指定するためのタグです。通常はCGIファイルへのパスを書き込みますが、CGIを使わない場合はmailto:に続けて受け取りたいメールアドレスを書き込みます。
METHODはACTIONで指定された送信先へどのような形式で送るかを指定するタグです。CGIの場合postかgetを選べますが、CGIを使わない場合はpostとします。

<FORM ACTION="mailto:abc@defg.ne.jp" METHOD="post">

とりあえず、アンケートページの下準備をしてしまいましょう。下のHTMLを参考に「enquete」ディレクトリに置いたダミーの「index.html」を作り直してください。
View
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
<TITLE>Kimura's Room:Enquete</TITLE>
</HEAD>
<BODY BGCOLOR="#ECECEC" BACKGROUND="../img/BGtop.gif" LINK="#009933" ALINK="#ff0000" VLINK="#999999">

<CENTER>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="25">

<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="80%" BGCOLOR="#009933">
<TR><TD ALIGN="right"><FONT COLOR="#ffffff"><B>Enquete</B></FONT></TD></TR>
</TABLE>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="10">
<BR><BR>

<!--★★テーブル★★-->
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="80%">
<TR><TD>
<B>アンケートにご協力ください</B>
<HR>
<!--★★フォームタグ★★-->
<FORM ACTION="mailto:abc@defg.ne.jp" METHOD="post">

<!--★★フォーム終了タグ★★-->
</FORM>

</TD></TR>

</TABLE>

</CENTER>
</BODY>
</HTML>




1行分文字を入力させるためのフィールド

●<INPUT TYPE="text" SIZE="n" NAME="n" MAXLENGTH="n">
サンプルの「E-mail」や「お名前」などの1行分のテキストを入力させるためのタグがINPUTです。単独のタグですので閉じタグはいりません。
オプションタグTYPEのパラメータにはテキストを入力させる場合「text」を入れます。
SIZEはフィールドの大きさです。パラメータにはピクセル数ではなく、文字数を入れます。20とすると半角文字20文字分の大きさのフィールドになります。つまり日本語なら10文字分です。ここで特に気を付けて欲しいのが、WINDOWSとMacintoshでは表示される文字の大きさが違うということです。つまり、この20文字分の大きさとは、見ている人の環境によって大きさが異なるということです。画面の解像度が違うため、WINDOWSはMacintoshに比べ大きな文字で表示されますのでMacintoshでちょうどいい大きさに指定してもWINDOWSでは、ばかでかく表示されてしまい、またWINDOWSでちょうどいいとMacintoshではチマチマしたボックスになってしまいます。

もちろんこの指定はあくまで大きさの指定であって、20半角文字分に指定してもそれ以上の文字数を入力することは可能です。もし指定の文字数分以上は入力させたくない場合はMAXLENGTHオプションで文字数を指定します。
NAMEはこのフィールドの定義です。フォームによって送信された情報を受信したとき「この情報はどの項目に対して書かれたものか」を解るようにするものです。
E-mailのテキストフィールドはサイズ40文字分、NAMEは「mail」としました。
View
<HTML>

------略-------

<!--★★フォームタグ★★-->
<FORM ACTION="mailto:abc@defg.ne.jp" METHOD="post">

<B>●E-mail</B><BR>
<INPUT TYPE="text" SIZE="40" NAME="mail">

<!--★★フォーム終了タグ★★-->
</FORM>

</TD></TR>

</TABLE>

</CENTER>
</BODY>
</HTML>

backindexnext