この節では HTML上で、ユーザが入力して送信するための基本的なフォームを構成するコントロールやボタンの設定、フィールドなどを設定するための要素や属性を取り上げます。

■ フォームの設定

ページに入力フォームを設定するには、form要素を用いなければなりません。この要素で記述する属性は以下の通りです。

form要素に用いる属性と値、およびその働き
属性	値	機能
action	URI	処理するプログラムの送信先 URIを指定する必須の属性
method	HTTPメソッド	`get、post`のどちらかのメソッドを選択 `get` ：URIの形式でデータが送信（デフォルト値） `post`：フォームの本文として送信される
enctype	MIMEタイプ	データを送信する際の MIMEタイプ絵オ指定する
name	名前	スクリプトなどから参照する根前の指定

サーバのCGIプログラムを利用する場合には、accept属性で、データとして処理可能なMIMEタイプを指定し、プログラムの文字コードを指定する accept-chaset属性を利用します。

なお、データを送信する際の enctype属性では、ブラウザによっては必ずしも指定されたMIMEタイプが保証されるわけではありません。データを安全にかつ確実に送信するには、CGIを利用する方法が推奨されています。

PageTop

■ 入力するコントロールの設定

フォームにおける入力フィールドを形成する構成部品を「コントロール」と呼び、多様な構成部品が用意されています。input要素の、type属性を用いて、コントロールの形式を設定します。

コントロールの形式は以下の通りです。

属性値	機能
text	１行のテキスト入力フィールド（デフォルト値）
password	パスワード用入力フィールド（*型などに置き換えて表示）
checkbox	チェックボックス（複数の選択が可能な入力フィールド）
radio	丸型のラジオボタン（１つしか選択できない）
submit	送信ボタン（ボタンが押されると即時にデータが送信される）
reset	リセットボタン（フォーム内のすべてのデータをリセットし初期状態に戻す）
button	汎用ボタン
image	送信ボタンなどを画像で表示させる（`alt`属性は必須）
file	送信するファイルの選択（添付ファイルに用いる）
hidden	フィールドを表示せずにサーバに送信するデータとする

input要素は、必ずしもフォームの内容として使用しなければならないというわけではなく、他のブロックレベル要素や、インラインレベル要素の中でも、ユーザインターフェイスの一つとして使用することができますが、Netscpae Navigator 4.x 以前のブラウザでは、フォーム以外の場所で使うと無視される危険があります。

PageTop

■ 複数行の入力フィールド

フォーム内の入力フィールドに、複数行の入力可能なテキスト入力領域を設定するのに、textarea要素を用います。この入力フィールドは、フォームのデータが送信される場合、name属性で付けた名前とデータが組みになってサーバに送られます。

textarea要素の属性は次の通りです。

属性	値	機能
cols	幅	入力領域の文字数を設定
rows	行数	入力領域の表示行数を設定
name	名前	入力領域の名前を指定する（設定した名前が共に送信される）
disabled	-	入力領域の操作の変更を禁止する（データは送信されない）
readonly	-	入力領域の内容の変更を禁止する（データは送信されない）

cols属性で指定した文字数数、roess属性で指定した行数などは、入力可能な制限を受けるわけではありません。

PageTop

■ メニューと選択肢の設定

フォームにあらかじめメニューを設定し、ユーザによって選択させることができます。メニューを作成する select要素、メニュー項目の選択肢を作成する option要素を用います。

メニューとその項目を設定する記述は以下の通りです。

<form action="/cgi-bin/sample.cgi" method="post">
<select name="sample">
<option>Netscpa Navigaor 4.x</option>
<option>Netscape 6.0</option>
<option>Netscape 7.0</option>
<option>Microsoft Internet Exproler 5.0</option>
<option>Microsoft Internet Exproler 5.5</option>
<option>Microsoft Internet Exproler 6.0</option>
<option>Opera 6.0</option>
<option>Opera 6.05</option>
<option>Mozilla 0.9.1</option>
<option>Mozilla 1.0.2</option>
</select>
</form>

メニューの表示結果はこのようになります。

PageTop

■ 選択肢のグループ化

メニューにおける項目の選択肢をグループ化する optgroup要素は、HTML4.0 で初めて勧告された要素です。この要素は、label属性とともに用いられます。

比較的新しい機能ですが、古いブラウザとの互換性も考慮されています。この要素に対応していないブラウザでは、単にメニューが階層化されずに表示され、選択肢としての項目は無視されずに表示されますので、安心です。

メニューのグループ化を設定する記述は以下の通りです。

<form action="/cgi-bin/sample.cgi" method="post">
<select name="sample">
<optgroup label="Netscape">
<option>Netscpa Navigaor 4.x</option>
<option>Netscape 6.0</option>
<option>Netscape 7.0</option>
</optgroup>
<optgroup label="Microsoft Internet Explorer">
<option>Microsoft Internet Exproler 5.0</option>
<option>Microsoft Internet Exproler 5.5</option>
<option>Microsoft Internet Exproler 6.0</option>
</optgroup>
<optgroup label="Opera">
<option>Opera 6.0</option>
<option>Opera 6.05</option>
</optgroup>
<optgroup label="Mozilla">
<option>Mozilla 0.9.1</option>
<option>Mozilla 1.0.2</option>
</optgroup>
</select>
</form>

グループ化したメニューの表示結果はこのようになります。

PageTop

■ コントロールのグループ化

input要素で形成された各コントロールを視覚的にグループ化して、入力するユーザに見やすい環境を提供します。

コントロールをグループ化する要素は、fieldset要素を、グループ化するラベルに legend要素を共に用います。

コントロールのグループ化を設定する記述は以下の通りです。

<form action="/cgi-bin/sample.cgi" method="post">
<fieldset>
  <legend>個人情報</legend>
  <div>
  名前：<input type="text" name="name" size="20">
  住所：<input type="text" name="adrress" size="30"><br>
  電話：<input type="text" name="phone" size="20">
  メール：<input type="text" name="E-mail" size="30">
  </div>
</fieldset>
<fieldset>
  <legend>会員情報</legend>
  <div>
  会員番号：<input type="text" name="Menber" size="10">
  講義教室：<select>
            <option>HTML初級講義</option>
            <option>HTML中級講義</option>
            <option>XHTML講義</option>
            </select>
  </div>
</fieldset>
</form>

上記サンプルの表示結果は以下の通りです。

個人情報

名前：住所：
電話： Mail ：

会員情報

会員番号：講義教室：

PageTop

■ ラベルの設定

フォームのコントロールにラベルをつけて明確に関連付ける要素に、label要素があります。この要素は、value属性によってラベルをつけることができないコントロール（メニュー、チェックボックス、ラジオボックスなど）に対して、そのラベルであるテキストとそれ自体を関連付けるために使用します。

コントロールにラベルを関連付ける方法は、２種類あります。１つは、label要素の内容としてコントロールとラベルの両方を含める方法です。

<label>
  <input type="radio" name="sex" value="male">男性
</label>

もう１つの方法は、別のブロックレベル要素あるいは、別のデータセルにコントロールとラベルが分かれる場合に、for属性を用いる場合です。

<table>
<tr>
   <td><label for="male">男性</label></td>
   <td><input type="radio" name="sex" id="male"></td>
</tr>
</table>

for属性で指定したラベルは、必ず id属性によって関連付けるようにします。

PageTop

■ フォームのアクセシビリティ

非視覚系ブラウザでは、マウスが使えないものがあります。そのため、各コントロールにユーザがアクセスできるよう設定しておく必要があります。

アクセシビリティをサポートする属性は以下の通りです。

属性	適用要素	設定
accesskey	input、textarea、button、label、legend	任意の１文字
tabindex	input、textarea、button、select	順番の数字

accesskey属性は、ショートカットキーを割り当てる機能があり、これによってコントロールが選択されます。利用方法は OSやブラウザなどによって異なりますが、Windowsであれば、altキー、Macintoshであれば、controlキーなどを同時に押して利用します。

tabindex属性は、タブキーによって移動させる場合に用います。指定できる値は、0～32767の数字で、小さい順に移動します。

PageTop