フォームとは

フォームは掲示板やアンケートなどのユーザが入力したデータをサーバに送り、CGIと呼ばれるプログラムでデータを処理するときやJavaScriptでデータを処理したいときに使います。そのため、フォームは単体で使うことはなく、データの処理に必要なプログラムの作成も同時に行わなければ成りません。この章ではフォームだけに注目し、データを処理するプログラムについては別な章で説明します。

フォームはFORM要素で、データ入力の部分はINPUT要素を使って作ります。フォームの使用例を以下に示します。

<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
<LABEL for="name1">姓: </LABEL>
  <INPUT type="text" id="name1"><BR>
<LABEL for="name2">名: </LABEL>
<INPUT type="text" id="name2"><BR>
<LABEL for="email">電子メール: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male">男<BR>
<INPUT type="radio" name="sex" value="Female">女<BR>
<INPUT type="submit" value="送信">
<INPUT type="reset" value="リセット">
</FORM>

これは次のように表示されます。

これはホームページでユーザを登録用を行うフォームの例です。各項目を入力し、送信のボタンをおすとデータがサーバに送られ、CGIによって処理されます。

フォームはFORM要素を使って指定します。その属性には入力されたデータを処理するプログラム(CGI等)そのものを指定するaction、データを送信するときの方法を指定するmethodがあります。これらの属性は省略できません。

FORM要素

FORM要素はフォームの範囲を指定し、どんな方法でデータを送信するか、そして処理プログラムを指定します。

FORM要素で指定できる属性を示します。

action: 送信するデータを処理するCGIのURIを指定します。指定がない場合は自分自身への送信になります。
method: フォームに入力されたデータをどうやってCGIに引き渡すかの指定で、値はgetかpostのいずれかです。
enctype: method属性にpostを指定したときのデータをどう加工して送信するかの指定で、次の二つの値を指定できる。デフォルトはapplication/x-www-form-urlencoded。この値を指定したときは入力データとその名前を=でつなげ、データとデータは&で区切って送り出します。もう一つの値は、multipart/form-dataです。この値は後述するINPUT要素のtype属性にfileを指定したときに有効で、fileのデータを送信するときに使います。
accept-charset: 送信する文字を他の文字コードに変換する場合に指定します。日本語の場合、いくつものコードがあるので処理側のプログラムで不具合が生じることがあります。これを正しく処理できるようにコード変換をデータ送信時に行います。
onsubmit: データを送信したときにCGIの代わりにJavaScriptなどでデータを処理したいときに使います。値はJavaScriptのプログラムの関数です。
onreset: onsubmitと同じです。

INPUT要素

文字列データはINPUT要素で入力します。この要素には次の属性があります。

<INPUT type="タイプ" name="名前" file="ファイル名" size="サイズ" value="値">

NAME属性

入力データをプログラムから参照するときに使う名前で他と重複しないように指定します。

TYPE属性

データをどのように入力させるかの種類を指定する属性で、下記の属性値を指定できます。

text

一行分の文字を入力するボックスを表示します。

<form>
  お名前:<input type="text" name="name" size="10">
</form>

password

一行分の文字を入力する点ではtextと同じですが、入力した文字がわからないようにします。

<form>
  パスワード<input type="password" name="pass">
</form>

checkbox

チェックボックス形式の入力を行うときに使い、複数の項目を選択できます。

name属性の値はすべて異なる値を指定し、送信するデータはvalue属性の値に指定します。

<form>
  <input type="checkbox" name="q1" value="1">パソコン
  <input type="checkbox" name="q2" value="2">携帯電話
  <input type="checkbox" name="q3" value="3">TV
</form>

radio

checkboxによく似ているが、選択できるのはリスト中の一項目だけです。選択肢をグループ化するのでname属性はすべて同じ値にします。

<form>
  <input type="radio" name="q1" value="1">パソコン
  <input type="radio" name="q1" value="2">携帯電話
  <input type="radio" name="q1" value="3">TV
</form>

submit

入力したデータを処理プログラムに送信するためのボタンを表示します。

<form>
  <input type="submit">
</form>

reset

入力したデータをすべてクリアーし、再入力するためのボタンを表示します。

<form>
  <input type="reset">
</form>

image

imageグラフィックスを使ったsubmitボタンです。表示するイメージのURIをsrc属性で指定します。

<form>
  <input type="image" src="button.gif">
</form>

button

押しボタンを表示します。ボタンにはvalue属性の値が表示されます。

<form>
  <input type="button" value="ボタン">
</form>

hidden

画面に表示されない入力情報を作ります。

<form>
  <input type="hidden" value="送信されない">
</form>

FILE属性

ファイルを送信したい時に使います。ファイル名を入力するテキストボックスとファイル参照用のボタンが表示され、ボタンをクリックするとファイルセンタのダイアログが表示される。

<form>
  <input type="file">
</form>

SIZE属性

text、passwordのテキストボックスの長さを指定したいときに使います。

<form>
  指定無し<input type="text"><br>
  10文字<input type="text" size="10"><br>
  20文字<input type="text" size="20"><br>
  30文字<input type="text" size="30"><br>
</form>

MAXLENGTH属性

TYPE属性がtext、passwordの時に、入力できる文字数を制限する属性。

<form>
  10文字まで入力可能<input type="text" maxlength="10" size="20"><br>
</form>

VALUE属性

checkbox、radio、submit、reset、hidden、button、fileの各要素で送信する値を指定する属性。

TEXTAREA要素

TEXTAREA要素は複数行に渡る文章を入力するフィールドが必要なときに使い、次の属性を指定できます。

属性	指定する値
name	TEXTAREAの名前を指定します。
rows	入力フィールドの行数を指定します。
cols	入力フィールドの一行の文字数を指定します。

TEXTAREAの使用例を示します。

<FORM action="http://....." method="post">
<P>
<TEXTAREA name="thetext" rows="20" cols="80">
最初の行です。
二行目です。
</TEXTAREA>
<br>
<INPUT type="submit" value="Send">
<INPUT type="reset">
</P>
</FORM>

TEXTAREAの開始タグと終了タグの間には何も入力しないこともできます。このときは入力フィールドには何も表示されませんが、上記の例のようにあらかじめ文を入力しておくこともできます。入力された文は入力フィールドが表示されたときにそのまま表示されます。

リストからの選択

複数の項目リストの中から一つあるいは複数の項目を選択させるときにはSELECT要素を使い、リスト項目はOPTION要素で必要な数だけ定義します。

SELECT要素では次の属性を指定できます。

属性	指定する値
name	SELECT要素の名前を定義します。
size	SELECT要素はスクロールできるリストボックスの形式で表示されます。この属性は表示する行数を指定したいときに使います。
multiple	複数のリスト項目を選択できるようにしたいとき、この属性を使います。値は指定しません。

OPTION要素ではselected属性を指定することで定義された項目を選択された状態にしておくことができます。

SELECT要素を使用した例を示します。

<HTML>
<HEAD><TITLE>SELECT要素の使用例</TITLE></HEAD>
<BODY>
<H1>SELECT要素の使用例</H1>
<FORM action="" method="post">
<P>
姓:<INPUT type="text" name="name1">
名:<INPUT type="text" name="name2"><BR>
電子メール: <INPUT type="text" id="email"><BR>
性別 :
<INPUT type="radio" name="sex" value="Male">男
<INPUT type="radio" name="sex" value="Female">女<BR>
年齢
<SELECT name="age" size="1">
  <OPTION value="0">0～9</OPTIN>
  <OPTION value="1">10～19</OPTION>
  <OPTION value="2">20～29</OPTION>
  <OPTION value="3">30～39</OPTION>
  <OPTION value="4">40～49</OPTION>
  <OPTION value="5">50～59</OPTION>
  <OPTION value="6">60～69</OPTION>
  <OPTION value="7">70～</OPTION>
</SELECT>
代
<P>
<INPUT value="送信" type="submit">
<INPUT value="リセット" type="reset">
</FORM>
</BODY>
</HTML>

OPTGROUP要素はOPTIONをグループ化するときに使います。