前のページに戻る

HTML入門の表紙へ

次のページへ


2. フォームでアンケート

〜 フォームタグの使い方 〜


2-1. フォームって何?

みなさんも、次のようにアンケートや感想を入力するページを見たことがあると思います。

お名前
性別 男性 女性

ご感想をどうぞ



このような入力欄をフォームといい、これもタグで書かれているのです。


2-2. メールデコードCGIが必要

フォームを送信するにはメールデコードCGIというものが必要になります。

メールデコードCGIとは、フォームで送られてくるメッセージを宛先(あなた)に届けるためのプログラムです。

メールデコードCGIはプロバイダが用意してくれている場合が多いので確認してみましょう。また、設定もプロバイダによってそれぞれ少し違います。

もしも、プロバイダでメールデコードのCGIが用意されていない場合には、フリーのメールデコードCGIを利用する手もあります。フリーのメールデコードサービスに関しては、てとりあしとりリンク集各種サービスからお探しください。


2-3. フォームの基本形

フォームの基本形は次の通りです。


                  ● フォームの基本形 ●



<FORM ACTION="メールデコードCGIのアドレス" METHOD="POST">
<INPUT TYPE="hidden" NAME="
CGI指定の名前" VALUE="メールアドレスなど">

<TEXTAREA NAME="message" COLS=40 ROWS=3>
</TEXTAREA> <BR>
<INPUT TYPE="submit" VALUE="
送信">

</FORM>






それぞれのタグには、つぎのような意味があります。

<FORM ACTION="メールデコードCGIのアドレス" METHOD="POST">
  〜 </FORM>

<FORM> 〜 </FORM>でフォームの範囲を指定します。

ACTION= にはメールデコードCGIのアドレスを書きます。

METHOD= の部分は送信方法です。ここには POST と書きます。(POST は必ず大文字で書いてください)。


<INPUT TYPE="hidden" NAME="CGI指定の名前" VALUE="メールアドレスなど">

この部分では送信先のメールアドレスなどを指定します。

使うメールデコードCGIによって違います。何行もあったり無かったりしますので、メールデコードCGIの説明を見て指定して下さい。


<TEXTAREA NAME="message" COLS=40 ROWS=3>
</TEXTAREA>

この部分がフォームの本文になります。

ここではテキストエリアを指定していますが、チェックボタンや選択メニューなども使用できます。後で詳しく説明していきます。


<INPUT TYPE="submit" VALUE="送信">

送信ボタンを設定しています。

送信ボタンがないとせっかく書いても送信できませんので、必ず一つ作ります。

(メールデコードCGIによっては、送信ボタンをクリックしても何も変わらないことがありますが、ちゃんと送信されていますので何度もクリックしないようにしましょう)



2-4. 一行テキスト入力

名前やメールアドレス、ホームページアドレスの入力に使う「一行テキスト入力」は次のように書きます。


                  ● 一行テキスト入力 ●



<FORM ACTION="メールデコードCGIのアドレス" METHOD="POST">
<INPUT TYPE="hidden" NAME="CGI指定の名前" VALUE="メールアドレスなど">

ホームページのアドレス<BR>
<INPUT TYPE="text" NAME="address" SIZE=60 MAXLENGTH=200 VALUE="http://">

<INPUT TYPE="submit" VALUE="送信">

</FORM>



ホームページのアドレス


オプションの意味は次の通りです。

● TYPE="入力欄の種類"
text:一行テキスト入力
password:入力文字を伏せる (入力文字がすべて * で表示されます)

● NAME="入力欄の名前"

入力欄の名前を指定します。表示されるわけではありませんが、指定しないとデータが送信されませんので必ず指定します。

● SIZE=入力欄の横幅

入力欄の横サイズを半角文字数で指定します。
(省略すると20になります)

● MAXLENGTH=入力できる最大文字数

入力できる文字の最大数を指定します。
(省略すると無限に入力できてしまいます)

● VALUE="最初に表示しておく文"

入力欄にはじめから表示しておきたい文があるときに指定します。



2-5. チェックボタン

性別を聞くときなどに使われるチェックボタンは次のように書きます。


                  ● チェックボタン ●



<FORM ACTION="メールデコードCGIのアドレス" METHOD="POST">
<INPUT TYPE="hidden" NAME="CGI指定の名前" VALUE="メールアドレスなど">

性別
<INPUT TYPE="radio" NAME="sex" VALUE="male" CHECKED> 男性
<INPUT TYPE="radio" NAME="sex" VALUE="female"> 女性
<INPUT TYPE="radio" NAME="sex" VALUE="sonota"> その他

<BR>
<INPUT TYPE="submit" VALUE="送信">

</FORM>



性別 男性 女性 その他


オプションの意味は次の通りです。

● TYPE="チェックボックスの種類"
radio:選択肢のうち一つだけチェックできます。一つをチェックすると前のチェックは消えてしまいます。
checkbox:選択肢のうち当てはまるものを制限なくチェックできます。

● NAME="選択肢群の名前"

選択肢のまとまりの名前を指定します(この場合「性別」というまとまりです)。表示されるわけではありませんが、指定しないとデータが送信されませんので必ず指定します。

● VALUE="ボタンの名前"

チェックされるとこの名前が送信されます。指定しないとどの項目がチェックされたのか分かりませんので必ず指定します。

● CHECKED

ボタンを最初からチェックしておきたい場合に指定します。



2-6. 選択メニュー

年齢や都道府県名などの選択メニューは次のように書きます。


                  ● 選択メニュー ●



<FORM ACTION="メールデコードCGIのアドレス" METHOD="POST">
<INPUT TYPE="hidden" NAME="CGI指定の名前" VALUE="メールアドレスなど">

年齢
<SELECT NAME="nenrei">
<OPTION VALUE="-9"> 10歳未満
<OPTION VALUE="10-19"> 10代
<OPTION VALUE="20-29" SELECTED> 20代
<OPTION VALUE="30-39"> 30代
<OPTION VALUE="40-49"> 40代
<OPTION VALUE="50-59"> 50代
<OPTION VALUE="60-"> 60歳以上
</SELECT>

<BR>
<INPUT TYPE="submit" VALUE="送信">

</FORM>



年齢


タグの意味は次の通りです。

● <SELECT NAME="選択メニューの名前" SIZE=メニューの縦サイズ>

NAME= には選択メニューの名前を指定します。表示されるわけではありませんが、指定しないとデータが送信されませんので必ず指定します。

SIZE= には選択メニューの縦サイズを指定します。省略すると上の例のようにプルダウン形式になります。

また、
<SELECT NAME="nenrei" SIZE=5 MULTIPLE>
などのように MULTIPLE を指定すると複数の項目を選択できるようになります。

年齢
● <OPTION VALUE="送信される名前"> 表示される名前

選択項目の一つ一つを指定しています。

VALUE= が指定されていると、選択されたときにこの名前が送信されます。省略すると画面に表示される名前がそのまま送信されます。

● </SELECT>

選択メニューの終わりの位置を示しています。


2-7. テキストエリア

感想など複数の行にまたがる入力欄は次のように書きます。


                  ● テキストエリア ●



<FORM ACTION="メールデコードCGIのアドレス" METHOD="POST">
<INPUT TYPE="hidden" NAME="CGI指定の名前" VALUE="メールアドレスなど">

<TEXTAREA NAME="kansou" COLS=40 ROWS=5>
ご意見ご感想などをお書き下さい。
</TEXTAREA>

<BR>
<INPUT TYPE="submit" VALUE="送信">

</FORM>






オプションの意味は次の通りです。

● NAME="入力欄の名前"

入力欄の名前を指定します。表示されるわけではありませんが、指定しないとデータが送信されませんので必ず指定します。

● COLS=入力欄の横幅

入力欄の横サイズを半角文字数で指定します。

● ROWS=入力欄の縦幅

入力欄の縦サイズを行数で指定します。



2-8. 送信ボタンとクリアボタン

                  ● 送信・クリアボタン ●



<FORM ACTION="メールデコードCGIのアドレス" METHOD="POST">
<INPUT TYPE="hidden" NAME="CGI指定の名前" VALUE="メールアドレスなど">

<INPUT TYPE="text" NAME="name">

<INPUT TYPE="submit" VALUE="送信">
<INPUT TYPE="reset" VALUE="書き直し">

</FORM>





オプションの意味は次の通りです。

● TYPE="ボタンの種類"
submit:送信ボタンです。このボタンがないといくら入力しても送信できませんので、必ず一つ作ります。
reset:今までに入力したデータをすべてクリアするボタンです。

● VALUE="ボタンの名前"

ボタンの名前を指定します。この名前がボタンに表示されます。



2-9. すぐに使えるアンケート見本

すぐに使えるアンケートの見本を用意しました。使い方は、

  1. アンケート見本をブラウザで表示します。
  2. ブラウザの [ファイル(F)] → [名前を付けて保存(A)] でアンケート見本を保存します。
  3. 保存したアンケート見本の下記の部分を、使用するメールデコードCGIに合うように書き換えます。
● 変更が必要なところ ●



  ・
  ・
  ・

<!----------フォーム開始---------->

<!--******この部分を書き換えてください****** -->

<FORM ACTION="メールデコードCGIのアドレス" METHOD="POST">
<INPUT TYPE="hidden" NAME="CGI指定の名前" VALUE="メールアドレスなど">

<!--*****************************************-->

  ・
  ・
  ・



[すぐに使えるアンケート見本]


ちょっと長くなりましたが、フォームはおわかりいただけましたか?

次は、絵の中の好きなところにリンクを張ることができる「クリッカブルマップ」についてです。



前のページに戻る

HTML入門の表紙へ

次のページへ