３．入力フォームの活用

これまでみてきたＨＴＭＬの機能では、ホームページ側から情報を一方的に 送るのみでした。
ＷＷＷの双方向性を活用して、アクセスした人からのデータ入力を受け取り、 その内容に応じて情報を提供するようなホームページを作るには、どうすれ ばいいのでしょうか。

そのためには、

　　　@ 画面からのデータ入力を受付けられるようにする
　　　　　　　　　　　…… 入力フォーム（クライアント側の処理）

　　　A 受付けた入力データを処理し、それに応じたページ内容を作成する。
　　　　　　　　　　　…… ＣＧＩ（サーバ側の処理）
　　　　　　　ＣＧＩ：The Common Gateway Interface

という、クライアント側の処理、サーバ側の処理をうまく連係する必要が あります。
ＣＧＩの利用については、ＷＷＷサーバのシステムの運用によって状況が 異なりますので、ここではＣＧＩではなくメール機能を利用して入力フォ ームからデータ入力を受付ける方法をご紹介しましょう。





（１）簡単な入力フォーム（文字データの入力）

　　　（ 例 ）入力フォーム




（クリックして下さい）


　　　　　　　メールの受信

　　　・ＨＴＭＬ文書

<H2　ALIGN="center">アンケートのお願い</H2>
<FORM　ACTION="mailto:kurihara@mail.netwave.or.jp?subject=enquete"　METHOD="post"
　ENCTYPE="text/plain" onSubmit="alert('アンケートを送信します')">
<HR>
<H3>お名前
　　<INPUT　TYPE="text"　NAME="name" ></H3>
<H3>会社名
　　<INPUT　TYPE="text"　NAME="kaisya"　SIZE="40"></H3>
<H3>ご住所
　　<INPUT　TYPE="text"　NAME="jusyo"　SIZE="40">(
　　<INPUT　TYPE="radio"　NAME="jusyokubun"　VALUE="会社">会社
　　<INPUT　TYPE="radio"　NAME="jusyokubun"　VALUE="自宅">自宅）</H3>
<H3>ご意見・要望等</H3>
<P><TEXTAREA　NAME="iken"　ROWS="5"　COLS="100"></TEXTAREA></P>

<CENTER>
　<INPUT　TYPE="submit"　VALUE="送信">　
　<INPUT　TYPE="reset"　VALUE="取消">
</CENTER>
</FORM>


　　　・書き方
　　　（ 入力フォームの定義 ）


＜ＦＯＲＭ　ＡＣＴＩＯＮ＝“ｍａｉｌｔｏ：メールアドレス”  …… メール宛先
            ＭＥＴＨＯＤ＝“ｐｏｓｔ”
            ＥＮＣＴＹＰＥ＝“ｔｅｘｔ／ｐｌａｉｎ”        …… 内容をエンコードしない
            onSubmit="alert('アンケートを送信します')"＞  …… 送信確認（JavaScript)
    〜 入力項目 〜 ＜／ＦＯＲＭ＞


　　　（ 文字列の入力 ）


＜ＩＮＰＵＴ　ＴＹＰＥ＝“ｔｅｘｔ”   …… 入力タイプ
              ＮＡＭＥ＝“データ名”   …… 入力データをシステム側に引き
                                            渡すために必要な名前
              ＳＩＺＥ＝“半角文字数” …… 入力エリアの横幅
              ＶＡＬＵＥ＝“初期値”   …… 入力エリアに初期値として表示
              ＭＡＸＬＥＮＧＴＨ＝“半角文字数”＞
                                       …… 入力できる最大文字数


　　　（ 登録、リセット ）


＜ＩＮＰＵＴ　ＴＹＰＥ＝“ｓｕｂｍｉｔ”
              ＮＡＭＥ＝“ボタンに表示する文字”＞ … 登録
                                       （入力データの受付・送信）

＜ＩＮＰＵＴ　ＴＹＰＥ＝“ｒｅｓｅｔ”
              ＮＡＭＥ＝“ボタンに表示する文字”＞ … リセット
                                       （入力データをクリア）


なお、フォームから入力されたデータは、標準ではＷＷＷサーバへ送信する際に コード変換（エンコード）しますので、サーバからメールとして送ら れる内容を見るためには、もとの文字列に再変換（デコード）する必要 があります。
このため、エンコードしないようＥＮＣＴＹＰＥ＝“ｔｅｘｔ／ｐｌａｉｎ”と指定しておきます。




（２）複数行の文字データ入力


ＴＹＰＥ＝“ｔｅｘｔ”では、入力エリアが一行のため長い文字列を入力 するためには不向きです。




（クリックして下さい）

　　　・ＨＴＭＬ文書

<H3>ご意見・要望等</H3>
<P><TEXTAREA　NAME="iken"　ROWS="5"　COLS="100"></TEXTAREA></P>


　　　・書き方


＜ＴＥＸＴＡＲＥＡ　ＲＯＷＳ＝“行数”
　　　　　　　　　　ＣＯＬＳ＝“カラム数”＞ 〜 初期値 〜 ＜／ＴＥＸＴ＞


実際には、表示されているエリアはスクロールしますので、入力エリアの 枠よりも長い文字列を入力することができます。




（３）複数項目からの選択


複数項目から選択してもらう方法として、選択ボタンと選択メニューが あります。

　　　（ 例 ）（ 入力フォーム ）




（クリックして下さい）

　　　　　　　（ 引き渡すデータ ）



　　　・書き方 （ 選択ボタン ）


＜ＩＮＰＵＴ　ＴＹＰＥ＝“ｒａｄｉｏ”     …… 単一項目選択（radioボタン）
              ＮＡＭＥ＝“データ名”       …… データ引き渡しに伴う名前
              ＶＡＬＵＥ＝“入力データ”   …… サーバへ送るデータ
              ＣＨＥＣＫＥＤ ＞〜データ〜  …… 初期状態で選択済みにする

＜ＩＮＰＵＴ　ＴＹＰＥ＝“ｃｈｅｃｋｂｏｘ”  …… 複数項目選択
              ＮＡＭＥ＝“データ名”            （checkboxボタン）
              ＶＡＬＵＥ＝“入力データ”
              ＣＨＥＣＫＥＤ ＞〜データ〜


　　　・ＨＴＭＬ文書

<H3>＜選択ボタン＞</H3>
<H4>内容について（単一選択）</H4>
　<INPUT　TYPE="radio"　NAME="naiyou"　VALUE="よい">よい
　<INPUT　TYPE="radio"　NAME="naiyou"　VALUE="普通">普通
　<INPUT　TYPE="radio"　NAME="naiyou"　VALUE="悪い">悪い
<H4>よかったページ（複数選択）</H4>
　<INPUT　TYPE="checkbox"　NAME="page1"　VALUE="インターネット入門"> インターネット入門
　<INPUT　TYPE="checkbox"　NAME="page2"　VALUE="ホームページ検索"> ホームページ検索
　<INPUT　TYPE="checkbox"　NAME="page3"　VALUE="おすすめホームページ"> おすすめホームページ


・書き方 （ 選択メニュー ）

＜ＳＥＬＥＣＴ　ＮＡＭＥ＝“データ名”＞           … １件のみの表示
   ＜ＯＰＴＩＯＮ　ＶＡＬＵＥ＝“入力データ”      … サーバへ送るデータ
               ＳＥＬＥＣＴＥＤ＞ 〜 データ 〜     … 初期状態で選択済み
＜／ＳＥＬＥＣＴ＞                                    にする


＜ＳＥＬＥＣＴ　ＮＡＭＥ＝“データ名”
               ＳＩＺＥ＝“件数”                  … ウインドウの行数
               ＭＵＬＴＩＰＬＥ＞                  … 複数項目選択可
   ＜ＯＰＴＩＯＮ　ＶＡＬＵＥ＝“入力データ”
               ＳＥＬＥＣＴＥＤ＞ 〜 データ 〜
＜／ＳＥＬＥＣＴ＞


　　　・ＨＴＭＬ文書

<H3>＜メニュー選択＞</H3>
<H4>お住まいは？　　
　<SELECT　NAME="jusyo">
　　<OPTION　VALUE="徳島">徳島
　　<OPTION　VALUE="香川"　SELECTED>香川
　　<OPTION　VALUE="愛媛">愛媛
　　<OPTION　VALUE="高知">高知
　</SELECT></H4>
<H4>ご利用場所は？
　<SELECT　NAME="basyo"　SIZE="3"　MULTIPLE>
　　<OPTION　VALUE="会社で">会社で
　　<OPTION　VALUE="自宅で">自宅で
　　<OPTION　VALUE="それ以外で">それ以外で
　</SELECT></H4>
<P>（複数選択可）</P>




　　

　　　［練習問題３］

　次のような入力フォームを使ったアンケートのページを作成して下さい。

　　　　　・練習問題３の作成例




（クリックして下さい）


　　[目次へ]　[次へ]




GigaHit