勝手にHTML4.0講座 - フォーム
1.フォームの概説
HTMLのフォームとは、地の文、マーク付け、コントロール、コントロールにつけたラベル によって構成される部分です。
コントロールには、チェックボックスやラジオボタン、メニューなどの形式があります。
文書の読み手はコントロールを操作することでフォームを完成させ、処理側（Webサーバやメールサーバなど）に送信します。
以下に簡単なフォームの例を挙げます。ラベル、ラジオボタン、プッシュボタンを備えています。
文書の利用者は、名前のついたコントロールの操作によって反応を返します。
コントロールの名前は、name属性によって記します。
この名前の有効範囲は、そのコントロールを含む FORM要素内に限られます。
各コントロールは、初期値と現在値を1つづつ持ち、一般的に初期値は「value」属性で指定します。
TEXTAREA要素の場合は要素の内容が初期値となります。
コントロールの「現在値」には、まず最初は初期値が利用されます。
その後、利用者の入力やスクリプトの実行によって変更されます。
コントロールの初期値は変化しません。
つまり入力内容がリセットされた場合、各コントロールの現在値は再び初期値に設定し直されます。
フォームが処理側に送信される際には、コントロール名と現在値を組にしたデータが送信されます。
HTML 4.0では、以下の形式のコントロールが定義してあります。
- ボタン：BUTTON要素か、INPUT要素で記します。
- 送信ボタン：フォームの内容を送信します。複数あってもかまいません。
- リセットボタン：フォームの内容が消去されて初期値に戻ります。
- 押しボタン：既定の動作はなく、スクリプトと連携して何らかの動作を行います。
- チェックボックス：ユーザーが操作する入/切の切り替え式スイッチです。INPUT要素で記述します。
- ラジオボタン：あるラジオボタンが[入]になると、他のラジオボタンが[切]になります。INPUT要素で記述します。
- メニュー：選択項目一覧を表示します。SELECT要素でメニュー枠を作り、OPTGROUP要素やOPTION要素で項目を配列していきます。
- テキスト入力：文章の入力欄です。INPUT要素では一行の入力欄を作り、TEXTAREA要素では複数行の入力欄を作ることができます。
- ファイル選択：ファイルを選択します。選択されたファイルの内容が送信されることになります。INPUT要素で記述します。
- 隠れコントロール：表示されません。フォームの他の内容と一緒に送信されます。INPUT要素で記述します。
- オブジェクト型コントロール：フォームの中にオブジェクトを埋め込んみます。OBJECT要素で記述します。
コントロールは通常FORM要素の中で用いられますが、フォーム要素の外で使われることもあります。
FORM要素の外で用いるコントロールは満足なコントロールとは成り得ないことにご注意下さい。
2.<FORM>要素
開始タグ: 必要
終了タグ: 必要
| 属性 = 属性値 | 説明 |
| action = URI | フォームを送信する先をURIで指定します。 |
| method = メソッド | データを送信するとき、HTTPのリクエストに使うメソッドを指定します。[get,post] |
| enctype = MIMEタイプ | 送信するデータのMIMEタイプを指定します。 |
| accept-charset = 符号化方法 | データの符号化方法(ShiftJIS,EUC-JPなど)を記します。 |
| accept = MIMEタイプリスト | MIMEタイプのリストを指定します。ここにのせてないMIMEタイプのデータを送信しようとすると警告が出ます。 |
| target = フレームターゲット | どのフレーム枠に文書を表示させるかの、フレーム枠の名前を記します。 |
| 内在イベント | onsubmit , onreset , onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | id , class , lang , dir , style , title |
FORM要素は、個々のコントロールをまとめて格納するコンテナのような働きをし、次の情報を扱います。
- フォームのレイアウト
- 送信データを扱うプログラム
- データ送信時のメソッド
- データの符号化方法
フォーム全体の中には、コントロールの他に文章を記すことができます。
次の例は「adduser」プログラムに対して、「post」メソッドによって送信されるフォームの例です。
二番目の例は、メールアドレスに送信されています。
<FORM action="http://somesite.com/prog/adduser" method="post">
...フォーム本文...
</FORM>
<FORM action="mailto:Kligor.T@gee.whiz.com" method="post">
...フォーム本文...
</FORM>
3.<INPUT>要素
開始タグ: 必要
終了タグ: なし
| 属性 = 属性値 | 説明 |
| type = コントロールタイプ | 要素を、どのコントロール形式にするかを指定します。既定値はtextです。 |
| name = 文字列 | コントロールに名前を付けます。同じ文書で同じ名前は付けられません。 |
| value = 文字列 | コントロールの初期値を指定します。type属性値がradio以外の場合は省略可能です。 |
| size = 文字列 | コントロールの表示幅を初期値として指定します。text,passwordの場合は文字数で、その他はピクセル数で指定します。 |
| maxlength = 数字 | text,passwordの時に、入力可能な最大の文字数を指定します。既定値は無制限です。 |
| checked | radio,checkboxの場合、ボタンが[入]であることを指定します。 |
| src = URI | type属性値がimageのとき、送信ボタンの装飾にこのURIの画像を用います |
| alt = 文字列 | 表示できない人のための代替テキストを示します。 |
| align = 配置コード | 表示するときに、水平方向での配置を指定します。[非推奨] |
| accept = MIMEタイプリスト | MIMEタイプのリストを指定します。ここにのせてないMIMEタイプのデータを送信しようとすると警告が出ます。 |
| readonly | コントロールへの入力をできなくします。 |
| disabled | コントロールを機能させなくします。 |
| usemap = URI | イメージマップとの関連づけをするときに、そのイメージマップの名前を指定します。 |
| tabindex = 数字 | タブキー移動のための順序づけをします。 |
| accesskey = 文字 | アクセスキーを指定します。 |
| 内在イベント | onfocus , onblur , onselect , onchange , onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | id , class , lang , dir , style , title |
INPUT要素のコントロール形式は、以下のtype属性値によって指定します。
- text:一行だけのテキスト入力欄を用意します。
- password:text同様の入力欄ですが、入力された文字列が隠蔽されて(*に置き換えられるなどして)表示されます。
- checkbox:チェックボックス形式のコントロールを用意します。
- radio:ラジオボタン形式のコントロールを用意します。
- submit:送信ボタンを用意します。
- reset:リセットボタンを用意します。
- image:画像付きの送信ボタンを用意します。src属性値で画像を指定します。クリック地点に関する情報も送信されます(name.x=x-value name.y=y-value)。
- button:押しボタンを用意します。value属性値がコントロールのラベルとして表示されます。
- hidden:隠れコントロールを用意します。
- file:ファイル選択コントロールを用意します。
以下のHTMLは、「姓」「名」「メールアドレス」「性別」の入力をさせるフォームを表したものです。
送信ボタンが押されると、action属性が指定している処理側プログラムに入力済みデータが送られます。
続く例では、ボタンがクリックされた時にJavaScriptの「verify」関数が呼び出されるようになっています。
<FORM action="http://somesite.com/prog/adduser" method="post">
姓: <INPUT type="text" name="lastname"><BR>
名: <INPUT type="text" name="firstname"><BR>
email: <INPUT type="text" name="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>
<HEAD>
<META http-equiv="Content-Script-Type" content="text/javascript">
</HEAD>
<BODY>
<FORM action="..." method="post">
<INPUT type="button" value="クリックして下さい" onclick="verify()">
</FORM>
</BODY>
4.<BUTTON>要素
開始タグ: 必要
終了タグ: 必要
| 属性 = 属性値 | 説明 |
| type = ボタンタイプ | どのようなボタンにするかを指定します。[submit,reset,button] |
| name = 文字列 | ボタンに付ける名前を指定します。 |
| value = 文字列 | ボタンの初期値を指定します。 |
| disabled | コントロールを機能させなくします。 |
| tabindex = 数字 | タブキー移動のための順序づけをします。 |
| accesskey = 文字 | アクセスキーを指定します。 |
| 内在イベント | onfocus , onblur , onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | id , class , lang , dir , style , title |
BUTTON要素で作られるボタンとINPUT要素のボタンは機能的には同等のものですが、
BUTTON要素の方が表現力豊かなボタンを表示できます。
下記の例のボタンにはIMG要素を組み込み、画像を張り付けたボタンにしています。
<FORM action="http://somesite.com/prog/adduser" method="post">
<BUTTON name="送信する" type="submit">
送る<BR><IMG src="image/send.gif" alt="Send">
</BUTTON>
</FORM>
5.<SELECT><OPTGROUP><OPTION>要素
(SELECT要素)
開始タグ: 必要
終了タグ: 必要
| 属性 = 属性値 | 説明 |
| name = 文字列 | コントロールに付ける名前を指定します。 |
| size = 数字 | SELECT要素の項目一覧の中の、表示される行数を指定します。 |
| multiple | 複数の項目を選択できます。 |
| disabled | コントロールを機能させなくします。 |
| tabindex = 数字 | タブキー移動のための順序づけをします。 |
| 内在イベント | onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | id , class , lang , dir , style , title |
(OPTGROUP要素)
開始タグ: 必要
終了タグ: 必要
| 属性 = 属性値 | 説明 |
| label = 文字列 | グループへラベル付けします。 |
| disabled | コントロールを機能させなくします。(選択不能にします) |
| 内在イベント | onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | id , class , lang , dir , style , title |
(OPTION要素)
開始タグ: 必要
終了タグ: 省略可能
| 属性 = 属性値 | 説明 |
| value = 文字列 | 選択項目の初期値を指定します。 |
| label = 文字列 | 選択項目にラベルを付けます。内容よりも簡略化した物を書きます。 |
| selected | 項目をはじめから[選択済み]にします。 |
| disabled | コントロールを機能させなくします。(選択不能にします) |
| 内在イベント | onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | id , class , lang , dir , style , title |
SELECT要素は選択項目一覧のメニューを作ります。
各選択項目はOPTION要素によって作られ、SELECT要素の中には最低でも1つのOPTION要素を用意しなければなりません。
OPTGROUP要素は、選択項目のグループ化を可能にし、長大な選択リストから選ばせたいような際に便利です。
選択肢は、selected要素で選択済みにしておくこともできます。
value属性が設定されてればそれが初期値に、なければ各要素の内容が初期値になります。
メニュー式選択一覧を表示する際、OPTION要素のlabel属性の値が選択項目として表示されます。
もし「label」属性が設定されていなかった場合は、OPTION要素の内容が表示されます。
OPTGROUP要素のlabel属性は、グループとしての名前をラベルづけに使います。
次の例では、７つの中から何個も選べるメニューです。size属性により４行が表示され、３行はスクロール表示されます。
<FORM action="http://somesite.com/prog/component-select" method="post">
<SELECT multiple size="4" name="component-select">
<OPTION selected value="Component_1_a">組合せ1</OPTION>
<OPTION selected value="Component_1_b">組合せ2</OPTION>
<OPTION>組合せ3</OPTION>
<OPTION>組合せ4</OPTION>
<OPTION>組合せ5</OPTION>
<OPTION>組合せ6</OPTION>
<OPTION>組合せ7</OPTION>
</SELECT>
<INPUT type="submit" value="送信する"><INPUT type="reset">
</FORM>
次の例ではコントロールをグループ化するためにOPTGROUP要素が使われています。
<FORM action="http://somesite.com/prog/someprog" method="post">
<SELECT name="ComOS">
<OPTGROUP label="PortMaster 3">
<OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1
<OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7
<OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5
</OPTGROUP>
<OPTGROUP label="PortMaster 2">
<OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7
<OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5
</OPTGROUP>
<OPTGROUP label="IRX">
<OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R
<OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R
</OPTGROUP>
</SELECT>
</FORM>
6.<TEXTAREA>要素
開始タグ: 必要
終了タグ: 必要
| 属性 = 属性値 | 説明 |
| name = 文字列 | コントロールに付ける名前を指定します。 |
| rows = 数字 | 同時表示可能な行数を指定します。 |
| cols = 数字 | 同時表示可能な幅数を指定します。 |
| readonly | コントロールを読み出し専門にします。 |
| disabled | コントロールを機能させなくします。 |
| tabindex = 数字 | タブキー移動のための順序づけをします。 |
| 内在イベント | onfocus , onblur , onselect , onchange , onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | id , class , lang , dir , style , title |
TEXTAREA要素は 複数行のテキスト入力枠を作成します。
TEXTAREA要素の内容として含まれている文を初期値として扱います。
readonly属性を設定することによって、書き換え不能な文章をTEXTAREA要素内に記述することができます。
次の例は20行×80桁で、初期値として2行の文が記されたTEXTAREA要素です。
<FORM action="http://somesite.com/prog/text-read" method="post">
<TEXTAREA name="thetext" rows="20" cols="80">
用意された第一行。
用意された第二行。
</TEXTAREA>
<INPUT type="submit" value="送信する"><INPUT type="reset"> value="リセットする"
</FORM>
7.<ISINDEX>要素[非推奨]
開始タグ: 必要
終了タグ: なし
| 属性 = 属性値 | 説明 |
| prompt = 文字列 | この属性値は、入力欄に注意書きとして表示されます。[非推奨] |
| その他 | id , class , lang , dir , style , title |
ISINDEX要素は[非推奨]です。代わりにINPUT要素を使って下さい。
ISINDEX要素は、1行だけのテキスト入力枠を作り、prompt属性の値を表題として表示します。
次の例は、ISINDEX要素とそれをINPUT要素で置き換えたものです。
<ISINDEX prompt="検索語を入力して下さい: ">
<FORM action="..." method="post">
検索語を入力して下さい: <INPUT type="text">
</FORM>
8.<LABEL>要素
開始タグ: 必要
終了タグ: 必要
| 属性 = 属性値 | 説明 |
| for = id | ラベル付けしたいコントロールのid属性の値を指定します。 |
| accesskey = 文字 | アクセスキーを指定します。 |
| 内在イベント | onfocus , onblur , onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | id , class , lang , dir , style , title |
コントロールの中には自動的にラベル付けされるものもありますが、ほとんどはラベル付けされません
(テキスト入力欄、チェックボックス、ラジオボタン、メニューなど)。
自動的にラベル付けされるようなコントロールは、そのvalue属性値がラベルとして用いられます。
ラベル付けされないコントロールに対しては、LABEL要素でラベル付けをすることが可能です。
LABEL要素はコントロールに追加情報を与えるために使います。
どのLABEL要素も他の1つのコントロールに結びつけられます。
コントロールとLABEL要素を結びつけるためには、対象とするコントロールのid属性値とfor属性値を一致させる必要があります。
for属性の活用により、ある特定のコントロールに複数の「LABEL」要素を関連づけることもできます。
次の例は、ラベルで関連づけられた2つのテキスト入力欄を配置した表になっています。
各ラベルはテキスト入力欄と明示的に結びつけられています。
<FORM action="..." method="post">
<TABLE>
<TR>
<TD><LABEL for="lname">姓</LABEL>
<TD><INPUT type="text" name="姓" id="lname">
</TR>
<TR>
<TD><LABEL for="fname">名</LABEL>
<TD><INPUT type="text" name="名" id="fname">
</TR>
</TABLE>
</FORM>
<FORM action="http://somesite.com/prog/adduser" method="post">
<LABEL for="lastname" >姓: </LABEL><INPUT type="text" id="lastname" ><BR>
<LABEL for="firstname">名: </LABEL><INPUT type="text" id="firstname"><BR>
<LABEL for="email" >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">
</FORM>
ラベルを属性指定せずに結びつけるためには、そのコントロールをLABEL要素内に入れておく必要があります。
この場合、そのLABEL要素には1つのコントロールしか入れてはいけません。
<FORM action="..." method="post">
<LABEL>
姓<INPUT type="text" name="姓">
</LABEL>
<LABEL>
名<INPUT type="text" name="名">
</LABEL>
</FORM>
8.<FIELDSET><LEGEND>要素
開始タグ: 必要
終了タグ: 必要
(LEGEND要素のみ)
| 属性 = 属性値 | 説明 |
| align = 配置コード | FIELDSET要素に対する、LEGEND要素の配置を指定します。[非推奨] |
| accesskey = 文字 | アクセスキーを指定します。 |
| 内在イベント | onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | id , class , lang , dir , style , title |
FIELDSET要素を使うと、似たようなテーマを扱うコントロールとラベルをグループ化することができます。
この要素を適切に用いると、ユーザのアクセスがより簡単になります。
LEGEND要素を使うと、FIELDSET要素にキャプションをつけることができます。
次の例は、医者にかかるときに記入するようなフォームです。
3つのパートに別れていて、個人情報、病歴、服用中の薬の3点を記入するようになっています。
<FORM action="..." method="post">
<FIELDSET>
<LEGEND>個人情報</LEGEND>
姓: <INPUT name="姓" type="text" tabindex="1">
名: <INPUT name="名" type="text" tabindex="2">
住所: <INPUT name="住所" type="text" tabindex="3">
...その他様々な個人情報...
</FIELDSET>
<FIELDSET>
<LEGEND>病歴</LEGEND>
<INPUT name="history_illness" type="checkbox" value="Smallpox" tabindex="20"> 天然痘
<INPUT name="history_illness" type="checkbox" value="Mumps" tabindex="21"> おたふく風邪
<INPUT name="history_illness" type="checkbox" value="Dizziness" tabindex="22"> 眩暈
<INPUT name="history_illness" type="checkbox" value="Sneezing" tabindex="23"> せき・くしゃみ
...その他様々な病歴情報...
</FIELDSET>
<FIELDSET>
<LEGEND>現在服用中の薬</LEGEND>
いま服用している薬はありますか?
<INPUT name="medication_now" type="radio" value="Yes" tabindex="35">はい
<INPUT name="medication_now" type="radio" value="No" tabindex="35">いいえ
現在服用中の薬がある方は、下の空欄に薬の名前をご記入下さい。:
<TEXTAREA name="current_medication" rows="20" cols="50" tabindex="40"></TEXTAREA>
</FIELDSET>
</FORM>