フォーム ってなに?
■ フォーム ってどんなもの?
まずはフォームがどのようなものか?ということから話を進めましょう。あまり深く考えず次の例を見て下さい。
例のように、文字を入れるスペースや候補から選択するもの(ラジオボックス)、送信ボタンなどなど。これらのことをひっくるめてフォームと呼んでいます。もう少し厳密に言いますと、WEBページ上からWEBサーバや同じページのスクリプトなどに何らかの情報を送信するための入力コーナーのことを言います。
ただし、当サイトで解説しますのは、どのようにフォームの入力部分を作るか、ということだけです。情報の受け取り方や、受け取ったデータをどのように使うか、ということについてはほとんどふれません。興味がある方は「CGI」や「JavaScript」などについて勉強してみて下さい。そしてフォームを構成します、文字の入力欄やチェックボックス、送信ボタンなどをフォームのコントロールと呼びます。
■ フォームの基本
さてフォームをWEBページ上に作る方法なのですが、これは少し複雑な記述となります。情報をどこに送るのか、何を送るのか、どうするのかなどを指定しなければなりませんので当たり前と言えば当たり前ですね。ただ、それぞれのコントロールを作る方法につきましては次のページ以降で順番に一つずつ解説していきますので、ここでは「<form>」タグに的を絞って解説を行います。
情報をどこに送るのか
<form action="./dmy.cgi" method="GET">
上記のように「action」属性にてどこに(どのファイルへ)情報を送るのかを相対パスまたは絶対パスにて指定をします。これは「CGI プログラム」であったり、「maito:」付きのメールアドレスであったりしますが、通常の「HTML」ファイルなどであっても特に問題はありません(情報を送る意味もありませんが)。「action」属性は必須項目となっていますので、必ず指定しなければなりません。
どんな情報を送るのか
どのような情報をどのような名前で送るのか、ということは各コントロールにて指定します。指定できるコントロールは以下の通りとなっています。
- 1 行入力のテキストボックス
- パスワード入力用の伏せ字テキストボックス
- チェックボックスとラジオボタン
- フォームを送信/リセットするボタン
ファイルアップロードのためのテキストボックス
定数を渡すための見えないコントロール - 画像のかたちのボタン
- 汎用のボタン
- リストボックスとコンボボックス
- 複数行入力用のテキストボックス
フォームから情報を送る場合に、送るデータがばらばらではどうしようもないですよね。送るデータを一まとめにするために、「ここから」「ここまで」を「action」で指定したファイルに送ります、と宣言するために、各コントロールを「<form>
」と「</form>
」で囲むのです。
なお、フォームには少なくとも一つの「送信ボタン」(submit)がなければなりません。複数の送信ボタンを設置し、それぞれに「NAME 属性」にて名前を与えておくことにより、押されたボタンを判別することもできます。
情報をどうするのか
<form action="./dmy.cgi" method="GET">
メソッド | HTTP | 命令内容 | |
---|---|---|---|
1.0 | 1.1 | ||
GET | ○ | ○ | URI で指定されたデータがファイルの場合はファイルの中身を返す。 CGI プログラムの場合はそのプログラムの出力データを直接返す。 |
POST | ○ | ○ | クライアントからサーバにデータを送信する。 |
HEAD | ○ | ○ | URI で指定されたファイルのメッセージヘッダのみを返送する。 ファイルの最終更新日や属性を調べる際に使用する。 |
PUT | ○ | ○ | URI で指定したサーバ上のファイルを置き換える。 見つからない場合は新規に作成する。 |
DELETE | ○ | ○ | URI で指定したファイルをサーバ上から削除する。 |
PATCH | - | ○ | PUT とほぼ同じだが、置き換える差分のみをサーバに送信する。 |
TRACE | - | ○ | サーバが受け取ったリクエストラインとヘッダをそのまま返信する。 |
OPTIONS | - | ○ | 通信オプションを通知したり調べたりする際に使用する。 |
LINK | - | ○ | 他の情報との関連付けを行う。 |
UNLINK | - | ○ | 関連付けを削除する。 |