Section 9 : フォームの基礎(1)

 WWW を歩く人に,サーチエンジンを知らない人はいないだろう。そのサーチエンジンでユーザからの入力を受け付けるのがフォームである。ここから,フォームを用いる方法を解説していこう。

フォームとは

 フォームにはフォームコントロールという要素が含まれている。その中には,文字を入れるスペース(テキストボックス),yes/no を選択する要素(チェックボックス),択一式のボタン(ラジオボタン),フォームを承諾するボタンなどが儲けられるだろう。フォームに書かれたデータは,スクリプトで処理が行われたり,メールとして送られたり,サーバに置かれたプログラムによって処理されたりする。

 ここから解説するのは,いかにフォームコントロールを生成し,データの入力を受けるかという部分であり,その受け取ったデータをいかに処理するのかという話題は本稿の範囲を出るので触れない。詳しくは,CGI,スクリプトを扱ったサイトや書籍を参考にされたい。

 ただし,フォームを利用したサイトを作るということは,データが外部から入ってくる可能性があるということであり,そこについて回るであろうセキュリティにはじゅうぶん気をつけなくてはならない。

<FORM>

 フォームを送る場合には,そのデータがばらばら散らばっているのではどうしようもない。データを“ひとくくり”にして“あて先”を指定しておくのが <FORM> である。

<FORM>...</FORM>

<FORM> はブロック要素で,その内容としてブロック要素をとるが,その中に <FORM> を入れ子にすることは許されない。

 属性はある程度の予備知識がないとわからないものもあるが,あげておくことにする。

<FORM> の属性
属性 解説
ACTION URI そのフォームの内容が渡される URI。CGI プログラムであったり,“maito:”を冠したメールアドレスであったりする。必須。
METHOD キーワード 値は get(既定値)あるいは post。ACTION 属性で示された URI に対してどのように働きかけるのかを指定する。
ENCTYPE MIME タイプ method="post" のとき,フォームのデータを,どのようなタイプで渡すのかを指定する。既定値は,application/x-www-urlencoded
ACCEPT-CHARSET 文字コードセット
(複数)
フォームに対してどんな文字コードセットを受け入れるかを指定する。
onSubmit スクリプト フォームが送信される直前に実行されるスクリプト。
onReset スクリプト フォームがリセットされたときに実行されるスクリプト。

 METHOD 属性は get が指定されると ACTION 属性の URI にフォームのデータをくっつけて読みに行く。この方法はおもにサーチエンジンで,検索文字列を受け取って検索結果を出すというような場合に用いられる。いっぽう post はユーザ登録フォームのように送られたフォームのデータが登録されるような場合に用いられる。フォームの内容をメールとして出す場合は post を用いる。

 ENCTYPE 属性はそういったフォームのデータが送られる形式である。既定値の application/x-www-urlencoded という形式は次のようなものである。

http://www.search.com/query.cgi?keyword=HTML+tutorial&type=and

サーチエンジンでキーワード検索をしたときに見ることがあるので,あれかな,と思っていただければよい。ENCTYPE 属性に関連した話は後ほどもう少しすることにしよう。

 この <FORM>...</FORM> の範囲をひとくくりにしてフォームのデータは送信される。それでは,作られるフォームコントロールを見ていこう。

フォームコントロール

 フォーム内のフォームコントロールは次のようなものがある。

  1. 1 行入力のテキストボックス(text
  2. パスワード入力用の伏せ字のテキストボックス(password
  3. yes/no 式のチェックボックス(checkbox
  4. 択一式のラジオボタン(radio
  5. フォームを送信させるボタン(submit
  6. フォームをリセットし,初期状態に戻すボタン(reset
  7. ファイルアップロードのためのテキストボックス(file
  8. 定数を渡すための見えないコントロール(hidden
  9. 画像のかたちのフォーム承諾ボタン(image
  10. 汎用のボタン(button
  11. リストボックス,ドロップダウンリスト
  12. 複数行入力用のテキストボックス

 このうち 1.〜10. は <INPUT> で,11. は <SELECT> で,12. は <TEXAREA> で生成する。また,5.,6.,10. はもっと利便性の高いものを <BUTTON> を用いて生成できる。

 フォームコントロールに対してラベルを作る要素として <LABEL>,いくつかのコントロールをグループ化するものとして <FIELDSET> も用いられるが,これは Soar through HTML の Section 1Section 2 で解説することにする。

 次の Section から,具体的なフォームコントロールについて解説を進めよう。