基本的なフォーム

form要素の構造

form要素タイプは2つの主要な属性を持ちます。ひとつは「どこに」、つまりデータを受け取るプログラムを指定するaction属性、もうひとつが「どうやって」、つまりデータの送信方法を指定するmethod属性です。

actionの値は、データを受け取るプログラムのURIを指定します。データ送信のmethodはpostとgetの2つの方法があります。それぞれデータ送信の方法が異なり、使い分けがありますが、一般的なフォームではpostを用いると考えておいてください。form要素の基本形は次のようになります。

<form method="post" action="CGIのURI">
..（入力コントロールや説明）
</form>

このform要素の内容に、以下で説明するinput要素などの入力コントロールや説明文を記述します。この範囲内で（コントロールを通して）入力されるデータが「何を」にあたり、actionで指定したプログラムに送信されます。

CGIプログラム

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

┌──────┐　　　┌─────┐　　　┌─────┐　　　┌──────┐
│　ブラウザ　│　→　│　ＷＷＷ　│　→　│　ＣＧＩ　│　→　│データベース│
│（フォーム）│　←　│　サーバ　│　←　│プログラム│　←　│など　　　　│
└──────┘　　　└─────┘　　　└─────┘　　　└──────┘

CGIプログラムはPerlやCなどのプログラム言語を使って作成します（Perlなどはプログラムを「スクリプト」と呼ぶので、それに合わせて「CGIスクリプト」と称することもあります）。アクセスカウンターやフォーム内容のメール送信といった一般的なものは、プロバイダで提供されることもあります。また、自作のCGIプログラムをアップロードして利用できるプロバイダもあります。

textタイプのinput要素

短い文字列を入力するためのコントロールを提供します。text型のコントロールは「フィールド」とも呼ばれます。GUIブラウザでは一般に「テキストボックス」が表示されますが、携帯端末などでは単に入力モードが切り替わるだけのこともあります。

フォームでは複数の入力項目を同時に送信しますので、データを受信したプログラムがそれぞれの項目を区別できるようにする必要があります。そのためにデータに名前を付けるのがname属性です。一般的なテキスト型のinput要素は次のようになります。

（例）氏名：<input type="text" name="氏名" />

name属性で指定した名前はプログラムに送信されるだけで、通常画面には表示されませんから、一般的にはinput要素の手前に文字でその内容を記述します（HTML 4.0ではこの説明とコントロールをlabel要素で結びつけますが、これは別の章で説明します）。

〔補足〕input要素は開始タグ単独で用い、内容を持ちません。そのためXHTMLの場合はタグを /> で閉じます。

submitタイプのinput要素

データの送信を指令するコントロールも同じinput要素の役割です。type="submit"と指定します。GUIブラウザでは「ボタン」の形で表示され、マウスでクリックすることで送信指令を与えることができます。value属性を指定すると、ボタンの名前としてその値を表示します。

（例）<input type="submit" value="送信" />

radioタイプのinput要素

比較的少数の選択肢から一つだけを選ぶ場合によく使われるのが「ラジオボタン」と呼ばれるradioタイプのコントロールです。ボタン選局式のラジオでは、どれか一つの局を選択するボタンを押すとほかの選択が解除されることから、この名前が使われるようになりました。

複数の選択肢それぞれにinput要素を用意し、同じグループのラジオボタンに属するものに共通のname属性を指定します。選択されたボタンを示すために、それぞれに異なるvalue属性を与えておきます。やはりnameの値は画面に表示されないので、ユーザーのために文字ラベルも加えておく必要があります。

性別：
<input type="radio" name="性別" value="男" /> 男　
<input type="radio" name="性別" value="女" /> 女

あらかじめ初期値としてどれかを選択した状態にしておきたい場合は、checked属性を用い、checked="checked" という記述を加えます。同じグループに属するラジオボタンの一つだけしかこの属性は設定できません。

<form method="post" action="CGIのURI" id="f1">
 <p>申込者氏名：<input type="text" name="username" />
 ...
</form>
...
<form method="post" action="CGIのURI" id="f2">
 <p>受取人氏名：<input type="text" name="username" />
 ...
</form>

checkboxタイプのinput要素

シンプルなOn/Off型のコントロールを提供するのが「チェックボックス」です。ラジオボタンと同様に複数のinput要素で同じ名前を共有することができますが、その場合でも同時に複数の項目を選択することができます。同じ項目を選択するたびに、OnとOffが入れ替わります。type属性をcheckboxとします

所持品：
<input type="checkbox" name="prop" value="CellPhone" /> 携帯電話　
<input type="checkbox" name="prop" value="Car" /> 自動車
<input type="checkbox" name="prop" value="Cottage" checked="checked" /> 別荘

初期値を選択した状態にしておきたい場合は、やはりchecked属性を用い、checked="checked" という記述を加えます。名前が同じでも、複数のチェックボックスを選択状態にしておいて構いません。

select要素によるメニュー

いわゆる「メニュー」というタイプの選択肢を提供するためにはselect要素を使います。この要素は、ブラウザやOSのタイプによって、また与える属性値などによって、「ポップアップメニュー」「ドロップダウンメニュー」「リストメニュー」など異なった形で表示されます。

メニューの選択肢はoption要素を列挙することで提供します。選択されたoption要素の内容が、select要素のname属性で指定した名前のデータとして送信されます。次の例で、option「みかん」を選択すると、それが「好きな果物」という名前とともに送信されることになります。

好きな果物：
  <select name="好きな果物">
    <option>りんご</option>
    <option>みかん</option>
    <option>バナナ</option>
    <option>パイナップル</option>
  </select>

初期値としてoption要素のどれかを選択した状態にしておきたい場合は、selected属性を用い、selected="selected" という記述を加えます。たとえば、バナナを選択した状態にするためには

（例）<option selected="selected">バナナ</option>

という具合です。どのoption要素にもselected属性を設定しないときは、通常最初のoption要素が初期値として選択されます。

select要素にsize属性を設定すると、多くのブラウザはその数の列を表示したスクロールフィールドを表示します。上の例で <select name="好きな果物" size="3"> とすると次のようになります。