TOP > Back > Place > Next

フォーム

◆ フォームって?

Webページで、検索の入力欄、アンケート、メッセージ、メールフォーム、パスワード等に使われています。これらの枠組みを、通常、フォームと呼びます。

テキストボックス(テキストの入力欄)の他に、ラジオボタン・チェックボックス・リストボックス・送信ボタンなどのボタン類の部品をHTMLタグで作り、これを コントロール(入力手段)と呼ばれています。<FORM>〜〜〜</FORM>で囲まれた部分がフォーム要素で、この中にコントロールの要素を記述します。
一般的に、送信方法やアンケートなどの集計はCGIプログラム(メールデコーダ等)を使います。

フォームの例:
フォームの内容(レイアウト)をまとめる為に、下記のようにテーブル<TABLE>を使います。
(下のフォームでは、送信出来ません。)

サンプルフォーム
名前:  1行テキスト欄
性別: 男   ラジオボタン
使用パソコン: Windows Macintosh その他   チェックボックス
居住地域:  プルダウンメニュー
記入欄:  テキストエリア
パスワード: ユーザー名
パスワード
 パスワード欄
添付ファイル:  ファイル選択欄
送信ボタン:    ボタン(送信等)

◆ <FORM>要素に入る属性

<FORM>の属性には、「ACTION」「METHOD」「ENCTYPE」があります。

ACTIONは、フォームに入力したデータを受け取るプログラムの送信先のURLを記述します。
例えば:
<FORM ACTION="http://***.***/***/***.cgi">
<FORM ACTION="mailto: ***@**.ne.jp">

METHODは、データの送信方法を指定します。送信方法には、「GETメゾット」「POSTメゾット」の2種類あります。METHODを指定しないと自動的にGETメゾットで送信されます。

GETメゾットは「取り出す事を目的とします」、通常 Yahoo!・goo 等の検索窓(キーワード欄)に使われています。入力数に制限があります。
例:<FORM METHOD="GET">
検索ボタンを押すとこのようなURLが指定されます。
「http://search.yahoo.co.jp/bin/search?p=HTML
HTMLがキーワード欄に入力したものです。

POSTメゾットは「投稿する事を目的とします」、HTTPリクエスト(サーバーに対しての送信要求)に、<FORM>要素で書き込まれたものを添付して送信します。
例:<FORM METHOD="POST">

ENCTYPEは、一般的にURLエンコード方式で実行されますが、別のエンコードを使用する場合に指定します。
例:<FORM ENCTYPE="application/x-www-form-urlencoded">
MIMEタイプ値には、「text/plain」「multipart/form-data」「application/x-www-form-urlencoded」の3種類あります。
text/plainは、テキストデータとして、そのままの形で送信します。(ACTION="mailto:メールアドレス"の場合)
multipart/form-dataは、フォームにファイル選択があるとき、データを複数のブロックに分けてMIMEマルチパート形式で送信します。
application/x-www-form-urlencodedは、ENCTYPEの属性を指定しないのと同じです。


◆ CGIプログラム

CGIプログラムはPerlやCなどのプログラム言語を使って作成します(Perlは「CGIスクリプト」と言われます)。一般的には、アクセスカウンターや掲示板等に代表されます。

・送信ボタンを押されたら

フォームが送信したデータはWWWサーバを経由してプログラムに渡されます。サーバーとプログラムの間のやり取り手順をCGI (Common Gateway Interface) と呼びます。プログラムがさらにデータベースなどの外部プログラムを実行することが考えられたため、取次ぎ役(Gateway)とのやり取りのルール(Interface)という名前が付いているのです。この手順によって実行されるプログラムをCGIプログラム、一般的にCGIと呼んでいます。CGIプログラムは受け取ったデータを自分だけで処理したり、データベースなどの別のプログラムに渡すこともできます。処理結果は、サーバーを経由してHTMLデータなどの形で呼び出しブラウザに返されます。


上記フォームのソースです。(余分なタグは排除済み)


タグ解説


FORM

フォームを定義:

フォームの中に囲まれる要素として、INPUT|OPTION|SELECT といったコントロール要素が入ります。
<FORM>の属性には、「ACTION」「METHOD」「ENCTYPE」「TARGET」があり、データのやり取りするための値を指定します。
コントロールの要素は、テーブル、段落、リストなどの要素で配置します。

ACTION="送信先のURL"
送信先のURLを記述します。
METHOD="送信方法"
送信方法を記述します。送信方法には、「GET」「POST」があります。
ENCTYPE="MIMEタイプ"
データのMIMEタイプを記述します。
・text/plain
入力したテキストを変換せずに送信します。
・application/x-www-form-urlencoded
初期値。入力したテキストをURLエンコードで送信します。
・multipart/form-data
入力したテキストをMIMEマツチパートで送信します。
TARGET="送信結果のURL"
送信結果を表示するためのURLを記述します。


←BACKNEXT→

Copyright (c) Producer by System KS. 2001 All rights reserved.