フォームを作成する

あなたがほかの人に情報を発信するために、自分の作成したWebページを公開するということは、多くの人がそれを見る機会が生じます。なかにはあなたのページに感心がある人がいるかもしれません。そのような人から、あなたの公開したページに関して、感想や意見を送ってもらうことができます。

自分の作成したページを見た人から、ページのデザインやその内容についての感想や意見を送ってもらうには、電子メールが利用されます。ページを見た人が電子メールを送るために、自分の前のコンピュータ上で、わざわざメーラを起動しなくてもいいようにWWWでは、mailtoというサービスを使用することができます。

「リンクを張る」のところで説明した<A>タグを使用して、例えば、

<A HREF="mailto:my_neme@some_host.some_university.ac.jp">私あてのメールはこちらまで</A>

という記述をしたページを作成したとします。そのページを見た人が、「私あてのメールはこちらまで」という文字をクリックすると、メールを書くためのウィンドウが現れて、メッセージを書ける状態になります。メッセージウィンドウには、すでにあて先が記入されているので、Subjectとメッセージを記入すればメールを送ることができます。

もう１つの方法は、入力フォームを作成し、アンケート形式でメールを送ることもできます。

入力フォームの例 1

例えば、次のような記述をしてみましょう。
<HTML>
<HEAD>
<TITLE>E-mail to me</TITLE>
</HEAD>
<BODY BGCOLOR="#000080" TEXT="#ffffff" LINK="#ffd700" VLINK="#c0c0c0">
<H3>E-mail to me.</H3>
<HR>
<FORM METHOD="POST" ACTION="mailto:your_name@your_host_address">
<TABLE border=0>
<TR><TD>Your name:</TD>
<TD><INPUT TYPE="TEXT" NAME="name" SIZE=50 MAXLENGTH=50></TD>
</TR>
<TR>
<TD>Your e-mail address:</TD>
<TD><INPUT TYPE="TEXT" NAME="from" SIZE=50></TD>
</TR>
<TR>
<TD>Your sex:</TD>
<TD><INPUT TYPE=radio NAME="sex" VALUE="male" CHECKED>male
<INPUT TYPE=radio NAME="sex" VALUE="female" >female
<INPUT TYPE=radio NAME="sex" VALUE="unknown" >unknown</TD>
</TR>
<TR>
<TD>Title:</TD>
<TD><INPUT TYPE="TEXT" NAME="subject" SIZE=50></TD>
</TR>
<TR>
<TD COLSPAN=2 ALIGN=CENTER>Comment</TD>
</TR>
<TR>
<TD COLSPAN=2 ALIGN=CENTER>
<TEXTAREA WRAP="HARD" NAME="comment" ROWS=20 COLS=60>
</TEXTAREA></TD>
</TR>
<TR>
<TD COLSPAN=2 ALIGN=CENTER>
<INPUT NAME="submit" TYPE=submit VALUE="Submit">
<INPUT NAME="reset" TYPE=reset VALUE="Reset">
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>


ブラウザ表示

フォームを定義する

フォームは、<FORM>タグで囲まれた部分で、
<FORM METHOD="POST" ACTION="mailto:your_name@your_host_address">
・・・
</FORM>
のように定義します。ここで、your_name@your_host_addressはあなたの電子メールアドレスです。

内容の送信方法

内容の送信方法には、GETとPOSTの２つの方法があります。

文字入力フィールドを定義する

文字入力フィールドを定義するためには、
<INPUT TYPE="TEXT" NAME="name" SIZE=nSIZE MAXLENGTH=nMAX>
とします。TYPE="TEXT"はフィールドのタイプが文字入力ということを示し、NAME="name"はそのフィールドの名前です。SIZE=nSIZEではフィールドの長さを半角文字数nSIZEで指定します(SIZEを指定しないと半角文字20の長さになります)。MAXLENGTH=nMAXでは、ユーザが入力できる最大文字数を半角文字数で指定します。SIZE=nSIZEとMAXLENGTH=nMAXの部分は省略できます。

ボタンによる選択フィールドを定義する

ボタンによる選択フィールドを定義するためには、
<INPUT TYPE="radio" NAME="sex" VALUE="male" CHECKED> male
とします。TYPE="radio"とすることで、ラジオボタンをクリックして選択することができます。ラジオボタンは、複数の選択肢がある場合、それらから１つを選択する場合に使用されます。VALUE="male"にはボタンの意味する内容を記述しておきます。オプションとして、CHECKEDを付けておくと、すでにボタンがチェックされている状態で表示されます。

スクロールが可能な文字ボックスフィールドを定義する

スクロールが可能な文字ボックスフィールドを定義するためには、
<TEXTAREA WRAP="HARD" NAME="name" ROWS=nROWS COLS=nCOLUMNS>
・・・
</TEXTAREA>
とします。ROWS=nROWSでは行数(ROWS)を、COLS=nCOLUMNSでは１行の文字数(COLUMNS)をそれぞれ指定します。・・・の部分に文字を入力しておくと、ボックスフィールドに前もってその文字が表示されます。WRAPは、正式ではない属性ですが、改行コードの制御に使用されます。例えば、メール送信の際のデータ整形に役立ちます。

入力した結果を転送する

入力した結果を転送するためには、
<INPUT NAME="submit" TYPE="submit" VALUE="Submit">
とします。TYPE="submit"として転送するためのボタンを用意します。VALUE="Submit"では、ボタンに書かれる文字を記述します。また、記述したすべての入力をリセットするためには、
<INPUT NAME="reset" TYPE="reset" VALUE="Reset">
として、リセットするためのボタンを用意します。

入力フォームの例 2

次に、入力フォームを使用して、Web上のアンケート用紙を作成してみましょう。このアンケート用紙の項目に記入させ、その結果を後に、または、オンラインで集計することもできます。例えば、次のような記述をすると、
<FONT SIZE=5>アンケート項目</FONT><HR><P>
<FORM METHOD="POST" ACTION="mailto:your_name@your_host_address">
<TABLE CELLPADDING=5 CELLSPACING=1 BORDER=5>
<TR>
<TD>名前</TD>
<TD><INPUT TYPE=TEXT NAME=name></TD>
</TR>
<TR>
<TD>性別</TD>
<TD>
<INPUT TYPE=radio NAME=sex VALUE=0>男
<INPUT TYPE=radio NAME=sex VALUE=1>女
</TD>
</TR>
<TR>
<TD>年齢</TD>
<TD>
<SELECT NAME=age SIZE=5>
<OPTION VALUE=0>20歳以下
<OPTION VALUE=1>21歳〜30歳
<OPTION VALUE=2>31歳〜40歳
<OPTION VALUE=3>41歳〜50歳
<OPTION VALUE=4>51歳〜60歳
<OPTION VALUE=5>61歳以上
</SELECT>
</TD>
</TR>
<TR>
<TD>職業</TD>
<TD>
<SELECT NAME=job SIZE=5>
<OPTION VALUE=0>技術職
<OPTION VALUE=1>営業職
<OPTION VALUE=2>研究職
<OPTION VALUE=3>事務職
<OPTION VALUE=4>自由業
<OPTION VALUE=5>専業主婦
<OPTION VALUE=7>会社経営
<OPTION VALUE=8>教師
<OPTION VALUE=9>無職
<OPTION VALUE=10>その他
</SELECT>
</TD>
</TR>
<TR>
<TD>趣味</TD>
<TD>
<INPUT TYPE=checkbox NAME=hobby VALUE=0>読書
<INPUT TYPE=checkbox NAME=hobby VALUE=1>音楽
<INPUT TYPE=checkbox NAME=hobby VALUE=2>スポーツ
<INPUT TYPE=checkbox NAME=hobby VALUE=3>園芸<br>
<INPUT TYPE=checkbox NAME=hobby VALUE=4>旅行
<INPUT TYPE=checkbox NAME=hobby VALUE=5>料理
<INPUT TYPE=checkbox NAME=hobby VALUE=6>仕事
<INPUT TYPE=checkbox NAME=hobby VALUE=7>その他
</TD>
</TR>
<TR>
<TD>感想</TD>
<TD>
<TEXTAREA ROWS=5 COLS=40 NAME=comment WRAP=soft></TEXTAREA>
</TD>
</TR>
<TR>
<TD COLSPAN=2 ALIGN=CENTER>
<INPUT TYPE=submit VALUE=送る WIDTH=150>
<INPUT TYPE=reset VALUE="リセット" WIDTH=150>
</TD>
</TR>
</TABLE>
</FORM>


ブラウザ表示

このアンケート用紙作成に使用されたフォームについて説明することにします。
選択リストを表示して、選択肢の中から項目を選択するには、
<SELECT NAME="name" SIZE=nSIZE>
<OPTION VALUE=nVALUE>・・・
</SELECT>
とします。NAME="name"で、リストに名前をつけます。SIZE=nSIZEはリスト項目の行数(SIZE)を指定します。行数(SIZE)よりリストの項目が多い場合はスクロール可能なボックスが表示されます。SIZEを省略すると、リストの選択肢の数に合わせてリストの大きさが変わります。リストに用意する選択肢のそれぞれの項目はOPTIONの後の部分(・・・)に記述します。VALUEには、返される値(nVALUE)を入れます。OPTION SELECTEDとすると、この後に記述された部分があらかじめ選択された表示になります。
<SELECT NAME="name" MULTIPLE>
とすると、リストの選択肢から複数の項目を選択できます。

ラジオボタンで選択する場合は、複数の項目から１つの項目だけしか選択できませんでしたが、選択肢の中から複数の項目を選択することを可能にするためには、チェックボックスによる選択ができます。チェックボックスを表示するためには
<INPUT TYPE="checkbox" NAME="name" VALUE=nVALUE>・・・
とします。１つの質問への回答群は、NAMEを同じにして、VALUEの値(nVALUE)で区別するように記述します。ラジオボタンの場合と同様に、
<INPUT TYPE="checkbox" NAME="name" CHECKED>
としておくと、そのタグの後の項目が、あらかじめボタンがチェックされて表示されます。