3.入力フォームの活用
これまでみてきたHTMLの機能では、ホームページ側から情報を一方的に 送るのみでした。
WWWの双方向性を活用して、アクセスした人からのデータ入力を受け取り、 その内容に応じて情報を提供するようなホームページを作るには、どうすれ ばいいのでしょうか。
そのためには、@ 画面からのデータ入力を受付けられるようにする
…… 入力フォーム(クライアント側の処理)
A 受付けた入力データを処理し、それに応じたページ内容を作成する。
…… CGI(サーバ側の処理)
CGI:The Common Gateway Interface
という、クライアント側の処理、サーバ側の処理をうまく連係する必要が あります。
CGIの利用については、WWWサーバのシステムの運用によって状況が 異なりますので、ここではCGIではなくメール機能を利用して入力フォ ームからデータ入力を受付ける方法をご紹介しましょう。
(1)簡単な入力フォーム(文字データの入力)
( 例 )入力フォーム
メールの受信
・HTML文書
<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>
・書き方
( 入力フォームの定義 )
<FORM ACTION=“mailto:メールアドレス” …… メール宛先 METHOD=“post” ENCTYPE=“text/plain” …… 内容をエンコードしない onSubmit="alert('アンケートを送信します')"> …… 送信確認(JavaScript) 〜 入力項目 〜 </FORM>
( 文字列の入力 )
<INPUT TYPE=“text” …… 入力タイプ NAME=“データ名” …… 入力データをシステム側に引き 渡すために必要な名前 SIZE=“半角文字数” …… 入力エリアの横幅 VALUE=“初期値” …… 入力エリアに初期値として表示 MAXLENGTH=“半角文字数”> …… 入力できる最大文字数
( 登録、リセット )
<INPUT TYPE=“submit” NAME=“ボタンに表示する文字”> … 登録 (入力データの受付・送信) <INPUT TYPE=“reset” NAME=“ボタンに表示する文字”> … リセット (入力データをクリア)
なお、フォームから入力されたデータは、標準ではWWWサーバへ送信する際に コード変換(エンコード)しますので、サーバからメールとして送ら れる内容を見るためには、もとの文字列に再変換(デコード)する必要 があります。
このため、エンコードしないようENCTYPE=“text/plain”と指定しておきます。
(2)複数行の文字データ入力
TYPE=“text”では、入力エリアが一行のため長い文字列を入力 するためには不向きです。
・HTML文書
<H3>ご意見・要望等</H3>
<P><TEXTAREA NAME="iken" ROWS="5" COLS="100"></TEXTAREA></P>
・書き方
<TEXTAREA ROWS=“行数” COLS=“カラム数”> 〜 初期値 〜 </TEXT>
実際には、表示されているエリアはスクロールしますので、入力エリアの 枠よりも長い文字列を入力することができます。
(3)複数項目からの選択
複数項目から選択してもらう方法として、選択ボタンと選択メニューが あります。
( 例 )( 入力フォーム )
( 引き渡すデータ )
・書き方 ( 選択ボタン )
<INPUT TYPE=“radio” …… 単一項目選択(radioボタン) NAME=“データ名” …… データ引き渡しに伴う名前 VALUE=“入力データ” …… サーバへ送るデータ CHECKED >〜データ〜 …… 初期状態で選択済みにする <INPUT TYPE=“checkbox” …… 複数項目選択 NAME=“データ名” (checkboxボタン) VALUE=“入力データ” CHECKED >〜データ〜
・HTML文書
<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="おすすめホームページ"> おすすめホームページ
・書き方 ( 選択メニュー )
<SELECT NAME=“データ名”> … 1件のみの表示 <OPTION VALUE=“入力データ” … サーバへ送るデータ SELECTED> 〜 データ 〜 … 初期状態で選択済み </SELECT> にする <SELECT NAME=“データ名” SIZE=“件数” … ウインドウの行数 MULTIPLE> … 複数項目選択可 <OPTION VALUE=“入力データ” SELECTED> 〜 データ 〜 </SELECT>
・HTML文書
<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>
[練習問題3]
次のような入力フォームを使ったアンケートのページを作成して下さい。
・練習問題3の作成例
[目次へ] [次へ]