メニュー
目次
入力フォーム
入力フォーム
「入力フォーム」とは、HTMLで規定されている、ページ上にボタンや選択肢・入力用の窓などを表示させ、ユーザが指示したり記述した情報をwebサーバへ送信するための仕組みである。サーバ側では、受け取った情報を元に何か処理を行う。
- 例: アンケートを収集し、データベースへ登録する。
- 例: ユーザが指示した商品に関する情報をデータベースから取得して、表 示
通常CGIスクリプトと組み合わせて使用する。(CGIスクリプト:サーバ側で動作する自動処理を記述したもの次回以降に説明)
入力フォームの基本形
入力フォームは基本的に次のように記述する
<FORM ACTION= "データの送信先のURL" METHOD="GET(またはPOST)"> <INPUT>タグ <SELECT>タグ <TEXTAREA>タグ のどれか,またはその組み合わせ </FORM>
この<form>タグは,入力してもらいたい情報一組にひとつだけでよく,通常1ページには1つだけ記述する.例えばアンケートページやショッピングカートの画面で,それをまとめて1つだけ記述する.
1ページに複数の<form>タグを必要とするのは,例えば「新入生アンケート」と「購入希望アンケート」のように,まったく関係のない2つのアンケートを1ページに同時に用意するような場合だけであるが,そもそも複数のアンケートを1ページに書くとわかりにくくなるため推奨できない.
<form>タグのオプション指定には,ACTIONとMETHODが必要である.
- ACTION どのページ(CGIスクリプト、メールソフトなどを含む)へ情報を受け渡すのか
- URLの例: http://zzzzz.zzzzz.zzzz/hogehoge.cgi (通常CGIスクリプトファイルを指定)
- ページ名の例: zzzzzzz.cgi (通常CGIスクリプトファイルを指定)
- メールの例: mailto:zzzzzz@zzzzz.zzz.jp (普通のメールアドレス)
- METHOD その方法
- GET 一行分(短い情報)を受け渡す。例えば、
url?name1=.....&name2=.....
<form>タグの内側には,次の3種類のタグの組合せを記述する.
INPUTタグ
INPUTタグは次の6つのタイプがある.関係する要素はNAMEに同じ項目名を書くこと.VALUEには初期値を書く.「CHECKED」キーワードが書かれた項目は,最初から選択された状態として扱われる.radioタイプの場合には,どれか一つだけをCHECKDにしておく.
送信されるデータは,「項目名=値」の形で送信される.textとpasswordタイプでは入力された文字データ,checkboxとradioでは「VALUE=」で設定されていた値が送信される.
(応用)リンクボタンとしての入力フォーム
入力フォームのタグを,ただのリンクボタンとしても使用可能
使用例
<FORM METHOD="post" ACTION="リンク先のURL"> <INPUT TYPE="submit" VALUE="リンク先を示す言葉"> </FORM>
表示例
サーバ側での情報の受け取り例
Webブラウザから入力フォームを通して情報を送信すると,その後,Webサーバ側がそれを受け取ることになる.例えばアンケートなどに利用することを考えれば,アンケートページの作成者がその情報を取得できないと意味がない.
Webサーバ側では,次回以降説明する「CGI」を介して情報を受け取ることが一般的である.しかし,一番簡単なのは,次のようにmailtoを利用して、メールとして受け取ることもできる.(mailtoに関してはその下の項目を参照)
この方法ならば,アンケートページ作成者が,指定したメールアドレスでメールを読むだけで,情報を取得することができる.
ただし、メールソフトによってはうまくフォームに入力した内容をうまく取り込めないようだ(例えばAL-Mail)。これに関してはOutlookExpressやthunderbirdではうまくいく。
<FORM METHOD="POST" ACTION="mailto:メールアドレス" ENCTYPE="text/plain"> <TEXTAREA NAME="report" ROWS="10" COLS="40">ここに初期メッセージ </TEXTAREA> </FORM>
特殊なリンク方法(mailtoスキーム)
一番簡単に使える情報送信手段は,電子メールである.ページ中に存在するリンクをクリックすることでメールソフトを自動的に起動させる働きを持つ機能がある.
この機能は,mailtoスキームと呼ばれる.当然ブラウザ,および使用しているメールソフトがこの機能に対応していないと使うことができない.
使い方は次のとおり,特殊なリンクとして記述すればよい.
<A HREF="mailto:メールアドレス"> リンクを説明する言葉</A>
件名などを指定させることも可能である。
<a href="mailto:メールアドレス?subject=メールの件名となる言葉">
逆に,他人のページにこの機能が埋め込まれており,メールソフトが起動した際には,送信先をよく確認しなければならない.悪意を持った第三者に転送されてしまう可能性や,内容に必要以上の個人情報が取得されていないかどうかなどに特に注意すること.参考
応用例:Google検索ボックスの表示
以上の機能を組み合わせて,次のようなGoogleの検索ボックスを表示することができる
このボックスの表示方法はGoogle自身が紹介している