フォームとは

次に紹介するのはフォームです。

フォームとは、情報を入力して送信するもののことです。掲示板の書き込みフォームなどがその例です。

フォームの作り方

フォームを作るための要素があります。それがform要素です。

各入力ボックスなど（コントロール）をその中に配置します。

form要素には多くの属性があります。

action属性

action属性は、フォームの送信先のURLです。掲示板などの場合、入力に応じて処理を変化させるため、CGIなどに向けて送信されます。

method属性

method属性は、送信のメソッドを指定するもので、GET、POST、PUT、DELETEの4つのどれかです。普通のフォームで使われるのは主にGETとPOSTの2つで、method属性を指定しない場合GETになります。

これはフォーム情報の送信の違いで、GETの場合はURLに含めます。つまり、http://example.com/test.cgi?aaa=1&bbb=2のような形のURLになります。それに対しPOSTは、URLには含めず別の形（本文）でパラメータを送ります。そのため、URLに余計な文字列が入りません。URLの長さには限りがあることが多いため、掲示板のコメントなど長いデータを送るときはPOSTを使うとよいでしょう。逆にGETの利点としては、フォームに頼らずとも自分でURLにパラメータを付加すればパラメータを送れるという点があります。POSTでは、普通フォームを使わないとパラメータを送れません。

accept-charset属性

accept-charset属性は、送信時のエンコードを指定します。特に指定しなければページと同じになるので、使うことは多くないと思われます。

他にもまだありますが、ここでは省略します。とくにaction属性とmethod属性をよく使うので、覚えておきましょう。

コントロールの配置

さて、form要素だけおいても何も表示されません。それは当然のことで、form要素は「ここにフォームがあるよ」と言っているだけで、中身を置いていません。

そこで、次に中身を置きましょう。

中身にも数種類ありますが、代表的なものがinput要素です。input要素は空要素です。つまり、img要素などと同様に、中身があるのではなく、ただ「そこにある」ということを表すものです。

そして、input要素ひとつで「入力ボックス」「ボタン」「チェックボックス」など多彩な種類のコントロールを表現することができます。

それを決めるのがtype属性です。種類ごとに、使える属性やその意味も多少変わってきます。

ボタン

最初に紹介するのはボタンです。ボタンといっても数種類あり、ただのボタン、送信ボタン、リセットボタン、画像ボタンがあり、type属性はそれぞれ"button","submit","reset","image"です。

ただのボタンは、押しても特に意味はありません。JavaScriptを使うと意味が出てきます。

送信ボタン及び画像ボタンは、フォームのデータを送信します。つまり入力完了ということですね。

リセットボタンは、フォームの内容を最初の状態に戻します。

使える属性は、まずvalue属性があります。これはボタンに表示される文字列です。ただし、画像ボタンの場合、value属性の文字の代わりに画像を表示するので、src属性とalt属性（これはimg要素と同じです）を持ち、これで指定します。

そして、name属性があります。これはそのボタンの名前です。

実はこのname属性やvalue属性などは、全てのタイプのinput要素で使うことができます。意味は一貫して、name属性はそのコントロールの名前、value属性は送信先に送られるデータです。

入力ボックス

次によく使われると思われるのが、入力ボックスです。これにもいくつか種類があり、普通の入力ボックスとパスワードなどがあります。type属性は"text"と"password"です。type属性が省略された場合も"text"とみなされます。

パスワードの場合は、入力内容が隠されて表示されません。

これ用の属性はたくさんあります。

autocomplete

"on"または"off"。オートコンプリートするかどうか。

maxlength

入力できる長さ。

placeholder

フォーカスが当たっていないときに表示しておく文字列。

readonly

論理属性。変更できないことを表す。

required

論理属性。入力が必須であることを表す。

size

入力ボックスの長さ（文字数）。

dirname

入力方向情報フィールドの名前。

list

定義済み選択肢。datelist要素のID。

pattern

値のチェックに使う正規表現。

よく使われるのは、sizeやmaxlengthだろうと思われます。

また、この要素にvalue属性を指定しておくと、その値が最初から入力されています。ユーザーは、この値を変更して送信することができます。

dirname属性について少し説明を加えると、世の中には日本語のように左から右に書く言語だけでなく、右から左に書く言語も存在します。フォームを送られたサーバー側でそれを区別したいとき、dirname属性にフィールド名を指定すると、そのフィールド名で方向情報が送られます。

フィールド名というのは、たとえばname属性が"key"の入力ボックスに"foo"と入力してサーバーに送ったならば、サーバー側がえる情報は"key=foo"というようになります。

dirname属性によって送られる情報は左から右なら"ltr",右から左なら"rtl"ですので、たとえばdirname="key.dir"というようにした場合、サーバーへはさらに"key.dir=ltr"のような情報が送られることになります。

チェックボックス・ラジオボックス

type属性が"checkbox"のとき、チェックボックスに、"radio"のときラジオボタンになります。

これらは1つのグループの中にいくつかのチェックボックスまたはラジオボタンがあり、チェックボックスの場合はその中からいくらでも、ラジオボタンの場合は1つだけ選んでチェックするというものです。

使える属性は、まずはcheckedがあります。これは論理属性で、ある場合最初からチェックされています。もう1つはrequiredです。

あとはname,valueも当然使えます。同じグループのときは同じname属性にします。こうすることで、特にラジオボタンの場合、同じグループのものはどれか1つしか選べないようになります。

隠しパラメータ

type属性が"hidden"のとき、これは隠しパラメータとなり、表示されません。

特に特別な属性があるわけではなく、name属性とvalue属性があります。決まった名前で決まった値が送られるだけです。

これがある意味は、複数の種類のフォーム（例えば掲示板の場合、書き込みフォーム・新規スレッド作成フォームなどなど）を区別したい場合などに使用できます。

次回、他にもコントロールを紹介して、さらにサンプルも紹介します。