ＨＴＭＬの利用

４．１．９　フォーム

●フォーム機能を使う
<FORM>～</FORM>

フォーム機能を使うと、ＧＵＩでおなじみのテキストボックス、チェックボックス、ボタンといった要素をＨＴＭＬのページに配置することができます。つまり、ブラウザ上から、直接書き込むことができるエリアです。

フォームタグの説明
フォーム関連のタグは以下のようなものがあります。

<FORM>～</FORM>	フォームを設定します。
<INPUT TYPE=text>	文字入力のボックスを表示します。
<INPUT TYPE=radio>	ラジオボタンを表示します。
<INPUT TYPE=checkbox>	チェックボックスを表示します。
<INPUT TYPE=submit>	終了ボタンを表示します。
<SELECT><OPTION>	リストボックスを表示します。
<TEXTAREA>～</TEXTAREA>	テキストエリアを表示します。

フォームの書き方

文字入力のボックス
<HTML>
<BODY>

<FORM>
<INPUT TYPE=text NAME="sample1" SIZE=20 >
</FORM>

</BODY>
</HTML>

実行結果

ラジオボタン
<HTML>
<BODY>

<FORM>
<INPUT TYPE=radio NAME="button1" CHECKED>男
<INPUT TYPE=radio NAME="button1" >女
</FORM>

</BODY>
</HTML>

実行結果

チェックボタン
<HTML>
<BODY>

<FORM>
<INPUT TYPE=checkbox NAME="button2" >はい
</FORM>

</BODY>
</HTML>

終了・リセットボタン
<HTML>
<BODY>

<FORM>
<INPUT TYPE="submit" NAME="run" VALUE="実行">
<INPUT TYPE="reset" NAME="reset" VALUE="リセット">
</FORM>

</BODY>
</HTML>

リストボックス
<HTML>
<BODY>

<FORM>
<SELECT NAME="sel" SIZE=1>
<OPTION VALUE="no1">りんご
<OPTION VALUE="no2">バナナ
<OPTION VALUE="no3">いちご
<OPTION VALUE="no4">メロン
<OPTION VALUE="no5" SELECTED>梨
<OPTION VALUE="no6">パパイヤ
</SELECT>
</FORM>

</BODY>
</HTML>

テキストエリア
<HTML>
<BODY>

<FORM>
<TEXTAREA NAME="comment" ROWS=4 COLS=30 >
</TEXTAREA>
</FORM>

</BODY>
</HTML>

実行結果

説明用に各フォーム機能毎に<FORM>を書いていますが、実際は一つの<FORM>の中に複数のフォーム機能を書きます。そして、実行ボタンを押すと、それぞれ入力された値が各変数に代入されてＣＧＩプログラムに渡されます。

CGI(Common Gateway Interface) とは
　一般にホームページを見る時には、ウェブサーバに情報を送るように要求し、それに対してウェブサーバはＨＴＭＬ言語で書かれたホームページを送ります。
　見る側は、そのＨＴＭＬ言語をブラウザで見える形に変換してホームページとして見ます。
　このＣＧＩは単にＨＴＭＬ言語を送信するのではなく、ウェブサーバからさらにＣＧＩプログラムに処理をさせてその結果を返します。
　これにより、アンケートなどの対話的なページが作れるようになります。
　
一般の場合

　　　　　(1)

利用者

　ホームページ送信要求
→→→→→→→→→→→→
←←←←←←←←←←←←
　ＨＴＭＬ言語を送信

ウェブサーバ

　　　　　(2)

　ＣＧＩを使う場合

　　　　　　　(1)

利用者

　ホームページ送信要求
→→→→→→→→→→→→→→
←←←←←←←←←←←←←←
　ＨＴＭＬ言語と処理結果を送信

ウェブサーバ

　　　　　　　(4)

　↑　　　↓　

処理結果を返す

　(3)　　　(2)　処理要求

ＣＧＩプログラム

（注意）CGIを作成し、実行するには、あらかじめウェッブサーバにCGIプログラムを置いておかなければなりません。CGIを使用できないサーバもあるので、詳しくは使用しているプロバイダ等に問い合わせしてください。