基本的なフォーム

情報が一方的に流れる従来のメディアと異なり、WWWはユーザー(クライアント)が即時にサーバーに情報を送り返すことのできる双方向のメディアです。これを実現するために、HTMLにはフォームという仕組みが用意されています。

目次:

取り上げる要素: form input select option textarea

HTMLのフォーム

フォームは次のような入力用の項目から構成されます。この内容を記入・選択して「送信」すると、データがサーバーに送られます。

(フォームの例)

氏名:  → テキスト型
性別: 男   → ラジオボタン型
所持品: 携帯電話 自動車 別荘   → チェックボックス型
好きな果物:  → メニュー型
 → テキストエリア
   → 送信型

この例をもとに、HTMLのフォームを構成する要素を順番に説明していきます。この例のHTML全体は、本章の最後で改めて紹介します。

フォームの基本枠組み

データを送信するためには「何を」「どこに」「どうやって」送るかを示さなければなりません。フォームはこのための手段を提供します。

HTMLのフォームは、データを入力するための手段(コントロールと呼びます)と、それに関するラベルや説明から構成されるひとまとまりのセクションです。「何を」送信するかを示すためにこのセクションの範囲を明示し、「どこに」「どうやって」送信するかを設定します。この枠組みを提供するのがform要素です。

form要素の構造

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

actionの値は、データを受け取るプログラムのURIを指定します。データ送信のmethodはpostgetの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データなどの形で呼び出したブラウザに返されます。データの流れは次のようになります。

┌──────┐   ┌─────┐   ┌─────┐   ┌──────┐
│ ブラウザ │ → │ WWW │ → │ CGI │ → │データベース│
│(フォーム)│ ← │ サーバ │ ← │プログラム│ ← │など    │
└──────┘   └─────┘   └─────┘   └──────┘

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

input要素の基本

ユーザーからの入力を受け入れるための基本的な手段(コントロール)を構成するのがinput要素です。この要素はtype属性を変えることによって様々に姿を変えて登場します。もっとも基本的な形が、テキストを入力するためのtextタイプと、フォーム内容の送信を指令するsubmitタイプです。

textタイプのinput要素

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

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

(例)氏名:<input type="text" name="氏名" />

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

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

データの初期値と入力領域の長さ

textタイプのinput要素には、value属性で初期値を用意することができます。フォームの入力を簡単にするために、可能なところに初期値を用意するのはよい考えです。古いタイプのブラウザでは何らかの初期値がないとフィールドの選択すらできないことがあるので、その意味でも初期値の提供が推奨されています。

また、あるていど長い入力が必要な場合は、size属性でフィールドの長さ(文字数)を指定することができます。たとえばURLを入力してもらう場合に

(記述例)URL:<input type="text" name="url" value="http://" size="60" />

とすると、長いURLを入力できるフィールドが用意され、また最初のhttp://を入力する手間が省けます。

(表示例) URL:

submitタイプのinput要素

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

(例)<input type="submit" value="送信" />

選択肢の提供

データを自由記入するだけでなく、あらかじめ用意された選択肢から選ぶことができると、フォームを利用する方は入力がとても楽になります。代表的な選択肢の提供方法としては、input要素のradioタイプ、checkboxタイプとselect要素があります。

radioタイプのinput要素

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

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

(例)

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

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

フォームのコントロールの名前

a要素タイプのname属性は、文書の中での位置を特定するものなので、id属性と同様に扱われ、一つの文書内で同じ名前を複数回使うことはできません。それに対して、input要素などのフォームのコントロールのname属性は、そのコントロールが属するform要素の範囲内だけで名前を指定します。したがって、同じ文書内に複数のフォームを使う場合、それぞれのinput要素のname属性が重複しても差し支えありません。次の例は正しい名前の使い方です。

(例)

<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>

また、このラジオボタン型にみられるように、同じ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"> とすると次のようになります。

(表示例)

長い文章の入力

テキスト型のinput要素では1行のデータしか入力することができません。HTMLのフォームでは複数行にわたる文章の入力のためにtextarea要素が用意されています。アンケートの自由意見欄などにこのテキストエリアを使うことができます。

textarea要素はinput要素とは異なり、開始タグと終了タグのペアを使います。タグの間に記述された内容が初期値として使われます。データの名前を指定するname属性のほかに、入力エリアの行数、列数を示すrows属性cols属性を指定します。

(例)<textarea name="freeans" rows="4" cols="40"> 自由に意見を記述してください </textarea>

基本的なフォーム要素のまとめ

ここまでで基本的なフォームを作成するための材料を手に入れました。これらを組み合わせることで最初の例のようなフォームを作ることができます。

(例)

<form method="post" action="CGIのURI">
 <p>
 氏名:<input type="text" name="氏名" />
 性別:
 <input type="radio" name="性別" value="男" checked="checked" /> 男 
 <input type="radio" name="性別" value="女" /> 女
 所持品:
 <input type="checkbox" name="properties" value="CellPhone" /> 携帯電話
 <input type="checkbox" name="properties" value="Car" /> 自動車
 <input type="checkbox" name="properties" value="Cottage" /> 別荘 
 好きな果物:
 <select name="好きな果物">
   <option>りんご</option>
   <option>みかん</option>
   <option>バナナ</option>
   <option>パイナップル</option>
 </select>
 <textarea name="freeans" rows="4" cols="40">自由に意見を記述してください</textarea>
 <input type="submit" value="送信" /> 
 <input type="reset" value="取り消し" />
 </p>
</form>

※ここではコードをシンプルにするために、整列のための要素は省略しています。フォームの形を整えるためにはp要素、br要素table要素を使ったり、fieldset要素スタイルシートを組み合わせたりします。HTML4やXHTMLのStrictに適合するためには、inputselectなどのコントロール要素はブロックレベル要素の内容としなければなりません(HTML3.2までのformの内容モデルは%body.contentでした。HTML4でbodyの内容を%blockに制限したことから、そのままformの内容にまでこんな制約が加わったのではないかと邪推しています)。