WWW を歩く人に,サーチエンジンを知らない人はいないだろう。そのサーチエンジンでユーザからの入力を受け付けるのがフォームである。ここから,フォームを用いる方法を解説していこう。
フォームにはフォームコントロールという要素が含まれている。その中には,文字を入れるスペース(テキストボックス),yes/no を選択する要素(チェックボックス),択一式のボタン(ラジオボタン),フォームを承諾するボタンなどが儲けられるだろう。フォームに書かれたデータは,スクリプトで処理が行われたり,メールとして送られたり,サーバに置かれたプログラムによって処理されたりする。
ここから解説するのは,いかにフォームコントロールを生成し,データの入力を受けるかという部分であり,その受け取ったデータをいかに処理するのかという話題は本稿の範囲を出るので触れない。詳しくは,CGI,スクリプトを扱ったサイトや書籍を参考にされたい。
ただし,フォームを利用したサイトを作るということは,データが外部から入ってくる可能性があるということであり,そこについて回るであろうセキュリティにはじゅうぶん気をつけなくてはならない。
フォームを送る場合には,そのデータがばらばら散らばっているのではどうしようもない。データを“ひとくくり”にして“あて先”を指定しておくのが <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.〜10. は <INPUT> で,11. は <SELECT> で,12. は <TEXAREA> で生成する。また,5.,6.,10. はもっと利便性の高いものを <BUTTON> を用いて生成できる。
フォームコントロールに対してラベルを作る要素として <LABEL>,いくつかのコントロールをグループ化するものとして <FIELDSET> も用いられるが,これは Soar through HTML の Section 1,Section 2 で解説することにする。
次の Section から,具体的なフォームコントロールについて解説を進めよう。