フィル・アウト・フォームとして表示されるインプット・フィールドは幾つかの種類があります。用途に合わせて、INPUT、SELECT 、TEXTAREAの三つのエレメントを使います。

　

INPUTタグ: <INPUT>

INPUTタグはユーザーがデータを記入できるインプット・フィールドを作ります。
INPUTタグには、クローズタグはありません。
INPUTタグに入るアトリビュート：TYPEには "text"、"checkbox"、"radio"、
のいずれかが入り三種類のインプット・フィールドを作ります。

INPUTタグが作るこれら三種類のインプット・フィールドでは、ユーザーが直接文字を記入するのはテキスト・ボックスだけで、チェック・ボックスとラジオ・ボタンではあらかじめ"value"の入ったON/OFFの選択スイッチになります。
テキスト・ボックスでも勿論ですが、特にチェック・ボックスとラジオ・ボタンでは、NAMEとVALUEに付ける名前に明確な関係を持たせてネーミングをして下さい。

---

TYPE="text" （一行だけのテキスト・ボックス）

名前：

名前：<INPUT TYPE="text" NAME="name" SIZE="30" VALUE
       ="あなたの名前を記入して下さい">
       

---

TYPE="text"

一行だけのテキストを入力できるテキスト・フィールドを作ります。

NAME="name of field"

NAMEには、フィールドの名前を入れます。"name"と"value"がデータとなって送られてきます。従って、どんな名前でも構いませんが、受けとったデータがどのデータであるのかが分かるようにフィールド名を付けて下さい。

SIZE="number of characters"

フィールドの長さを、表示される文字数で指示します。size="30"はアルファベットで３０文字、日本語では半分の１５文字です。

VALUE="initial value"

このテキスト・ボックスでは、あらかじめ入れて置きたいテキストを記入します。ユーザーがエディットしなければ、つまり、何も記入しなければここに書かれたテキストがデータとして送られてきます。このテキスト・ボックスではオプションのアトリビュートです。

電子メイル：

電子メイル：<INPUT TYPE="text" NAME="email" SIZE="30">
       

---

VALUE="value"を入れないとインプット・フィールドは空白で表示されます。

---

TYPE="checkbox"（チェック・ボックス）
チェック・ボックスは複数のリストを選択出来ます。

ペットを飼っていますか： 熱帯魚 鳥 猫 犬

ペットを飼っていますか：
<INPUT type="checkbox" NAME="pet" VALUE="fish">熱帯魚 
<INPUT type="checkbox" NAME="pet" VALUE="bird">鳥 
<INPUT type="checkbox" NAME="pet" VALUE="cat">猫 
<INPUT type="checkbox" NAME="pet" VALUE="dog">犬 
       

---

TYPE="checkbox"

複数のリスト項目を選択できるチェック・ボックスと呼ばれるインプット・フィールドを作ります。

NAME="name of fields"

このチェック・ボックスではヴァリュー・リストを作るので、それぞれのリスト項目にNAME="name"を入れますが、一つのフィールド内では、フィールド名は同じでなければなりません。

VALUE="value"

それぞれのリスト項目（チェック・ボックス）に固有の名前を入れます。

---

TYPE="radio"（ラジオ・ボタン）
ラジオ・ボタンはチェック・ボックスと違い、選択出来るのは一項目だけです。

貴方の年齢は：
１０代 ２０代 ３０代 ４０代 ５０代 60歳以上

貴方の年齢は：

<INPUT TYPE="radio" NAME="age" VALUE="under20" CHECKED>１０代
<INPUT TYPE="radio" NAME="age" VALUE="under30">２０代 
<INPUT TYPE="radio" NAME="age" VALUE="under40">３０代
<INPUT TYPE="radio" NAME="age" VALUE="under50">４０代
<INPUT TYPE="radio" NAME="age" VALUE="under60">５０代
<INPUT TYPE="radio" NAME="age" VALUE="over60">60歳以上
       

---

TYPE="radio"

複数項目から一つだけを選択するラジオ・ボタンと呼ばれるインプット・フィールドを作ります。

NAME="name"

フィールド名はリスト項目が単数/複数に関係無く、いつも一つです。

VALUE="value of field"

それぞれのリスト（ラジオ・ボタン）に固有の名前を入れます。

CHECKED

最初に表示された時に、そのボタンをあらかじめ選択された状態にしておきます。
このアトリビュートはオプションです。入れなければ、どのボタンも選択されてない状態で最初に表示されます。

SELECTタグ：<SELECT> </SELECT>

SELECTタグはINPUTタグと違いクローズタグが必要です。
SELECTタグは選択メニューを作ります。
ポップ・アップ・メニューとメニュー・ウインドー（必要に応じてスコロール・バーを表示）の二種類の表示方法があります。

---

ポップアップメニュー：<SELECT NAME="name of field" >

好きな色は: です。 赤 青 黄色 白 黒 紫 オレンジ ピンク ゴールド シルバー

好きな色は：
       <SELECT NAME="color">
          <OPTION SELECTED>赤
          <OPTION>青
          <OPTION>黄色
          <OPTION>白
          <OPTION>黒
          <OPTION>紫
          <OPTION>オレンジ
          <OPTION>ピンク
          <OPTION>ゴールド
          <OPTION>シルバー
       </SELECT>
     

---

<SELECT> </SELECT>

複数のリスト項目から一項目だけを選ぶ選択メニューを作ります。
SELECTタグにNAME以外のアトリビュートを入れない場合は、選択メニューの表示はデフォルトでポップ・アップ・メニューが表示されます。

NAME="name of field"

SELECTタグの中に入って、フィールド名を作ります。

<OPTION>

このOPTIONタグがSELECTタグが作るコンテイナーの中でvalueリストを作ります。
OPTIONタグにはクローズタグはありません。

CHECKED

あらかじめリスト項目の一つを選択された状態にしておきます。
このアトリビュートはオプションです。入れなければ、メニューの最初のリスト項目が選択されて表示されます。

---

メニュー・ウインドー： <SELECT NAME="name" MULTIPLE SIZE=number>

SELECT に MULTIPLEというアトリビュートが複数のリスト項目の選択を可能にします。 複数選択は Command/Control を押したままクリックして下さい。一度選択したリストの取り消しも同様です。

好きな色は： 赤 青 黄色 白 黒 紫 オレンジ ピンク ゴールド シルバー

好きな色は：
       <SELECT NAME="color" MULTIPLE SIZE=6>
          <OPTION>赤
          <OPTION SELECTED>青
          <OPTION>黄色
          <OPTION SELECTED>白
          <OPTION>黒
          <OPTION>紫
          <OPTION>オレンジ
          <OPTION>ピンク
          <OPTION>ゴールド
          <OPTION>シルバー
       </SELECT>
   

MULTIPLE

複数のリスト項目の選択を可能にします。

SIZE="number"

メニュー・ウインドーの大きさを指示します。サンプルのSIZE="6"は六種類のリスト項目を表示できるメニュー・ウインドーを作ります。リストの数が SIZEの数よりも多い場合はスクロール・バーが表示されます。

CHECKED

チェックされたリスト項目は選択された状態で表示されます。
このアトリビュートはオプションです。入れなければ、何も選択されていない状態で表示されます。

コメント・ボックス： <TEXTAREA NAME="comment"> </TEXTAREA>

コメント・ボックス
コメントをどうぞ

<TEXTAREA NAME="comment" ROWS=6 COLS=40>コメントをどうぞ</TEXTAREA>
       

---

<TEXTAREA> </TEXTAREA>

ユーザーがテキストを入力出来るコメント・ボックスを作ります。
<INPUT TYPE="text">で作るテキストボックスは一行ですが、このTEXTAREAタグではテキスト・ラインや文字数をボックスのサイズで指示することが出来ます。
SELECTタグと同じく、クローズ・タグ</TEXTAEA>が必要です。

NAME="name of field"

フィールド名を入れます。

ROWS

コメント・ボックスの縦のサイズを文字数で指示します。"ROWS=6"は６行です。

COLS

コメント・ボックスの横のサイズを文字数で指示します。"COLS=40"はアルファベットで４０文字、日本語では半分の２０文字です。

コメント・ボックス内にあらかじめメッセージを書き込んでおきたい場合は、「コメントをどうぞ 」のように、 TEXTAREAタグで挟んでおきます。

「実行」と「リセット」ボタン：SUBMIT & RESET

ユーザーによって入力されたデータは“実行ボタン”によって送られます。あるいは、ユーザーが取り消したい場合は“リセット・ボタン”をクリックすることで、入力されたデータは全てクリアーされ、デフォルト・ヴァリューに戻ります。

このボタンを作る "SUBMIT", "RESET" は、一番最初にやったINPUTタグのアトリビュート：TYPEに入るインプット・オプションです。

     <INPUT TYPE="submit" VALUE="実行">
     <INPUT TYPE="reset" VALUE="リセット">
       

実行ボタンはクリックしても問題ないとは思いますが、正常には動きません。

---

TYPE="submit"

ファームに記入されたデータを送る実行ボタンです。

TYPE="reset"

ユーザーが記入した内容を変更する場合に使うリセットボタンです。

VALUE

ここに書かれたテキストがボタンの名前になります。

繰り返しますが、「実行」「リセット」の選択ボタンを作る、submitとresetは最初に紹介したINPUTタグのアトリビュート：TYPEに入る、"text", "checkbox", "radio"などと同じインプット・オプションです。

注意：
フォームデータが送られてきた際に、その内容がきちんと分からなければ意味がありませんから、インプットフィールドを作る際にはフィールド名（アトリビュート：NAMEに書き入れる内容）には充分に注意して下さい。
e-mailで送られてくるフォームデータは次のようなものです。

name=Osmai+Tanaka&e-mail=info@abacuss.com&comment=This+is+a+test+form+posted.

これは英語でインプットされ、送られてきたものですが、最初のname=に続いて、&マークの後にくるe-mail=, comment=, がNAMEアトリビュートに記入したフィールド名、その後に続くキャラクターがユーザーがインプットした内容です。インプットの際のブランクは＋サインに置き換えられます。

最後ですが、 フォームはクローズ・タグ </FORM> で閉めることを忘れないように。