8.書式 Forms

書式は書式情報一式に手段と実行URIを結び付けた雛型です。書式情報一式は名前と値の組み合わせを並べたものになります。名前は書式入力要素のNAME属性で定義され、値は表記されたさまざまな書式の初期値か利用者の打ち込みが渡されます。書式情報一式の結果は、動作や手段の関数として情報サービスへの接続に使用されます。

書式要素は文書構造化要素と混在させることができます。例えば<PRE>要素に<FORM>要素を含めてもかまいませんし、<FORM>要素に<INPUT>要素を含んだ一覧を含めてもかまいません。これにより書式の意匠をたいへん柔軟に設計することができます。

書式の処理は第2水準での機能です。

8.1.書式要素 Form Elements

8.1.1.書式 Form:FORM

書式要素は文書構造化要素に沿った一組の入力要素を含みます。属性は以下のとおりです:

ACTION
書式の実行URIを定めます。省略するとその文書の基本URIになります(7,「超連鎖」参照)。

METHOD
実行URIへの接続手段を選択します。適用できる手段のセットは、書式の実行URIスキームの関数となります。8.2.2,「照会:METHOD=GET」8.2.3,「副次効果付き書式:METHOD=POST」を参照してください。

ENCTYPE
プロトコル自体が形式を強制しない場合に、転送するために名前/値の組み合わせを符号化するのに使われる伝送種別を指定します。8.2.1,「url符号化書式伝送種別」を参照してください。

8.1.2.入力欄 Input Field:INPUT

<INPUT>要素は利用者が入力する欄を表わします。入力欄それぞれの違いはTYPE属性で区別します。

<INPUT>要素は数多くの属性を持っています。これに適用できる属性一式はTYPE属性の値によって変化します。

8.1.2.1.記入欄 Text Field:INPUT TYPE=TEXT

TYPE属性の値は省略すると`TEXT'になり、1行の記入欄を示します。(複数行の記入枠では<TEXTAREA>を使用します)

必要な属性は以下のとおりです:

NAME
この要素に対応する記入欄に名前をつけます。

追加できる属性は以下のとおりです:

MAXLENGTH
記入欄に入力できる文字の数を制限します。MAXLENGTHの値がSIZE属性値より大きな場合、その欄は適切に巻上げることを条件とします。省略すると文字数無制限になります。

SIZE
記入欄の種類に従って、これを表示するために割かれる画面の大きさを定めます。省略すると利用者代理に依存します。

VALUE
記入欄の初期値を定めます。
使用例:
<p>番地(Street Address):
<input name=street><br>
住所(Postal City code):
<input name=city size=16 maxlength=16><br>
郵便番号(Zip Code):
<input name=zip size=10 maxlength=10 value="99999-9999"><br>
8.1.2.2.合言葉欄 Password Field:INPUT TYPE=PASSWORD

`TYPE=PASSWORD'が入っている<INPUT>要素は、上記のものと同様の記入欄ですが、入力された値を隠して見えないようにします。(10,「防犯への配慮」参照)


使用例:
<p>名前: <input name=login>
合言葉: <input type=password name=passwd>
8.1.2.3.チェック升 Check Box:INPUT TYPE=CHECKBOX

`TYPE=CHECKBOX'が入っている<INPUT>要素はブール関数選択升を表わします。この要素で同じ名前を持つものを組み合わせると、多数の項目から複数の選択をさせることができます。必要な属性は以下のとおりです:

NAME
この要素および組み合わせた要素に対応するチェック欄の象徴的な名前を定めます。

VALUE
この要素により与えられたチェック欄の値の一部となります。

追加できる属性は以下のとおりです:

CHECKED
最初からチェックされていることを表わします。
使用例:
<p>何味が好きですか?
<input type=checkbox name=flavor value=vanilla>バニラ<br>
<input type=checkbox name=flavor value=strawberry>ストロベリー<br>
<input type=checkbox name=flavor value=chocolate checked>チョコレート<br>
8.1.2.4.ラジオボタン Radio Button:INPUT TYPE=RADIO

`TYPE=RADIO'が入っている<INPUT>要素はブール関数選択ボタンを表わします。この要素で同じ名前を持つものを組み合わせると、多数の項目からどれか一つを選択させることができます。各チェック欄にはNAME属性とVALUE属性が必要です。追加できる属性は以下のとおりです:

CHECKED
最初からチェックされていることを表わします。

ラジオボタンのうちの一つはいつでもチェックされています。`CHECKED'で指定された<INPUT>要素がない場合には、利用代理者は最初のラジオボタンをチェックする必要があります。


使用例:
<p>どの味がお好みですか?
<input type=radio name=flavor value=vanilla>バニラ<br>
<input type=radio name=flavor value=strawberry>ストロベリー<br>
<input type=radio name=flavor value=chocolate>チョコレート<br>
8.1.2.5.画像ピクセル Image Pixel:INPUT TYPE=IMAGE

`TYPE=IMAGE'を伴う<INPUT>要素は、表示する画像素材を指定し、画像から選択されるピクセルのX・Y座標の入力を可能にします。X値とY値のそれぞれに`.x'と`.y'をつけたものが座標の名前になります。`TYPE=IMAGE'は'TYPE=SUBMIT'の処理を含みます。つまり、ピクセルが選択された時に書式全体が送信(submit)されます。

NAME属性は他の入力欄のために必要です。<IMG>要素についてはSRC属性が必要で、ALIGN属性が追加できます(5.10,「画像:IMG」参照)。


使用例:
<p>地図上の点を選んでください:
<input type=image name=point src="map.gif">
8.1.2.6.隠し欄 Hidden Field:INPUT TYPE=HIDDEN

`TYPE=HIDDEN'を伴う<INPUT>要素は隠し欄を表わします。利用者はこの欄に干渉できません。代わりにVALUE属性でこの欄の値を定めます。NAMEとVALUE属性が必要です。


使用例:
<input type=hidden name=context value="l2k3j4l2k3j4l2k3j4lk23">
8.1.2.7.送信ボタン Submit Button:INPUT TYPE=SUBMIT

`TYPE=SUBMIT'を伴う<INPUT>要素は入力選択スイッチ、一般的にはボタンを表わし、利用代理者に書式の送信を指示します。追加できる属性は以下のとおりです:

NAME
VALUE属性から渡された値を持つ入力欄に、この要素を組み込むことを示します。NAME属性が提示されていなければ、この要素は入力欄に組み込まれません。

VALUE
入力(ボタン)に名札を貼ります。

内部にリクエストする:
<input type=submit name=recipient value=internal><br>
あるいは外部にする:
<input type=submit name=recipient value=world>
8.1.2.8.取消ボタン Reset Button:INPUT TYPE=RESET

`TYPE=RESET'を伴う<INPUT>要素は入力選択スイッチ、一般的にはボタンを表わし、利用代理者に入力欄を元に戻すように指示します。VALUE属性が提示されていれば入力(ボタン)に名札を貼ります。

終了したらリクエストを送信します:
<input type=submit><br>
書式内容を消去し、元に戻します: <input type=reset>

8.1.3.選択 Selection:SELECT

<SELECT>要素は、入力欄を値の一覧のようにして表示させます。値は<OPTION>要素から渡されます。属性は以下のとおりです:

MULTIPLE
値を複数選択できることを示します。

NAME
入力欄の名前をつけます。

SIZE
表示する項目数を指定します。1枠の選択欄を選択する場合は主に垂れ幕献立になり、複数枠の選択欄は主に一覧になります。
使用例:
<SELECT NAME="flavor">
<OPTION>バニラ
<OPTION>ストロベリー
<OPTION value="RumRasin">ラムレーズン
<OPTION selected>ピーチとオレンジ
</SELECT>

SELECTED属性がどの<OPTION>要素にも提示されていない場合には、初期状態は最初に選択されたものになります。

8.1.3.1.選択項目 Option:OPTION

Option要素はSelect要素の中にのみ存在します。どれか一つを選択するもので、以下の属性があります:

SELECTED
この項目が最初から選択されていることを表わします。

VALUE
その項目が選択されたときに返す値を示します。省略すると<OPTION>要素の内容が値になります。

<OPTION>要素の内容は項目の提示として利用者に提供されます。VALUE属性が存在しない場合はその内容が値として返されます。

8.1.4.記入枠 Text Area:TEXTAREA

<TEXTAREA>要素は複数行の記入枠を示します。属性は以下のとおりです:

COLS
書き込み区域の表示幅を字数で示します。

NAME
書式枠の名前をつけます。

ROWS
書き込み区域の表示桁数を示します。
使用例:
<TEXTAREA NAME="address" ROWS=6 COLS=64>
HaL Computer Systems
1315 Dell Avenue
Campbell, California 95008
</TEXTAREA>

<TEXTAREA>要素の内容は枠の初期値になります。

一般的にROWSとCOLS属性はその枠の表示可能文字数を決定します。枠は一般的に等幅活字で表示されます。HTML利用者代理はこの枠からはみ出す文章を必要に応じて巻き上げられるようにしてやることを条件とします。

8.2.書式送信 Form Submission

HTML利用者代理は書式の処理を始めるに当たって、まず各欄が初期状態の文書を示します。利用者は充てがわれた記入欄を書き変えられるようになっています。利用者が(送信ボタンや画像入力などを使って)書式が送信されるよう指示したとき、書式情報一式はその手段や実行URI、符号形式にしたがって処理されます。

書式に一行の記入欄しかない場合、その欄での改行を書式送信の要求として受けることを条件とします。

8.2.1.url符号化書式伝送種別 The form-urlencoded Media Type

書式の符号化は、設定を省略するとすべて`application/x-www-form-urlencoded'になります。この伝送種別では書式情報一式は以下のように表わされます。

  1. 書式の欄の名前と値は回避されます。
    空白は`+'に置き換えられ、予約された字は[URL]にあるようにして回避されます。つまり、英数字以外の字は、パーセント記号とその字のASCIIコードを16進数二桁で表わしたもの、`%HH'に置き換えられます。複数行の記入枠の値になっている改行は、CRとLFの組み合わせ、すなわち`%0D%0A'で表わされます。

  2. 各欄は文書に現われる順番に、`='により名前と値を区別し、`&'によりほかの組み合わせと区別して並べられます。値の入っていない欄は飛ばしてかまいません。特に、選択されていないラジオボタンやチェックボックスは符号化されたデータには出さないことを条件としますが、VALUE属性を持つ隠し欄は現わすことを条件とします。

    注 :
    問い合わせ書式送信からのURIは通常の錨形式の超連鎖としても使用できます。
    都合の悪いことに、`&'記号を書式記入欄の区切りに使用することは、SGML属性値における実体参照区切り子としての`&'記号の使用と搗ち合ってしまいます。
    例えば、`http://host/?x=1&y=2'は、`<a href="http://host/?x=1&#38;y=2"'あるいは<a href="http://host/?x=1&amp;y=2">'と書かれる必要があります。


    HTTPサーバ設計者、特にCGIを実装する者には、このような`&'記号を回避することによる混乱に利用者を巻き込まないよう、`&'に代えて`;'を使用する実装が薦められます。

8.2.2.問い合わせ書式 Query Forms:METHOD=GET

書式の処理が(例えば持続的なはっきりした効果を持たないなど)単一効能的ならば、書式の手段が`GET'であることを条件とします。データベース検索は視覚的効果はありませんが、問い合わせ書式の理想的な実例となります。

実行URLがHTTP URLで手段が`GET'である書式を処理するには、利用者代理は実行URLを立ち上げ、上記`application/x-www-form-urlencoded'形式に則って、`?'と書式情報一式を付け足します。次に利用者代理はこのURIへの連鎖を錨のようにして辿ります(7.2,「超連鎖の動作」参照)。

注 :
URL符号化の結果として非常に長いURIになるかもしれません。それは不完全な動作をする古いHTTPサーバの実装が原因です。そのため、書式送信が副次効果を持っていなくても`METHOD=POST'を使って書かれたHTML書式もあります。

8.2.3.副次効果付き書式 Forms with Side-Effects:METHOD=POST

(例えばデータベースの修正やサービスの申し込みなど)副次効果つきの書式の処理が結び付くサービスでは、書式の手段は`POST'にすることを条件とします。

実行URLがHTTP URLで、手段が`POST'である書式を処理するには、利用者代理は実行URIと上記'`application/x-www-form-urlencoded'形式のメッセージ本文を使って、HTTP POST処理を行います。利用者代理は上記HTTP GETからの応答を表示するのと同様に、HTTP POST交渉からの応答を表示することを条件とします。

8.2.4.書式送信例 Example Form Submission:アンケート書式 Questionnaire Form

以下の文書について考えてみましょう:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<title>HTMLフォーム送信の例</title>
<H1>質問例</H1>
<P>以下の質問にお答えください:
<FORM METHOD="POST" ACTION="http://www.w3.org/sample">
<P>あなたの名前: <INPUT NAME="name" size="48">
<P>男性 <INPUT NAME="gender" TYPE=RADIO VALUE="male">
<P>女性 <INPUT NAME="gender" TYPE=RADIO VALUE="female">
<P>家族の人数: <INPUT NAME="family" TYPE=text>
<P>自宅の所在地:
<UL>
<LI>ケント(Kent) <INPUT NAME="city" TYPE=checkbox VALUE="kent">
<LI>マイアミ(Miami) <INPUT NAME="city" TYPE=checkbox VALUE="miami">
<LI>そのほか <TEXTAREA NAME="other" cols=48 rows=4></textarea>
</UL>
ニックネーム: <INPUT NAME="nickname" SIZE="42">
<P>質問に答えてくださりありがとうございました。
<P><INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>
</FORM>

書式情報一式の初期状態は以下のとおりです:

name
""

gender
"male"

family
""

other
""

nickname
""

ラジオボタンでの入力は初期値を持っていますが、チェック升では持たないことに注意してください。

送信される書式の記入欄や要求部分は利用者が書き換えるかもしれません。そこで、値を以下のようにしてみます:

name
"John Doe"

gender
"male"

family
"5"

city
"kent"

city
"miami"

other
"abc¥ndefk"

nickname
"J&D"

すると利用者代理は`http://www.w3.org/sample'というURIを使ってHTTP POST処理を行います。メッセージ本文は以下のようになるはずです(改行は無視してください):

name=John+Doe&gender=male&family=5&city=kent&city=miami&
other=abc%0D%0Adef&nickname=J%26D

戻る  目次  進む