この文書の最新版は「ばけらの HTML リファレンス」に移転しています (FORM, FIELDSET, LEGEND, LABEL, INPUT, SELECT, OPTGROUP, OPTION, TEXTAREA, BUTTON, OBJECT) 。以下の文章は古くなっているかも知れません。
フォームを形作るブロック要素……FORM
フォームコントロールをグループ化する要素……FIELDSET, LEGEND
フォームコントロール……LABEL, INPUT, SELECT, OPTGROUP, OPTION, TEXTAREA, BUTTON
汎用コントロール……OBJECT
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
FORM | 2.0 | 2.x | 3.2 | 4.0 | 必須 | 必須 | ブロック | ブロックと SCRIPT(ブロックとインライン)、ただし FORM を除く |
属性 | 適用バージョン | 属性値 | 既定値 | 備考 | |||
---|---|---|---|---|---|---|---|
action | 2.0 | 2.x | 3.2 | 4.0 | URI | (必須) | フォームの送信先 |
method | 2.0 | 2.x | 3.2 | 4.0 | (get | post) | get | データ送信方法 |
enctype | 2.0 | 2.x | 3.2 | 4.0 | MIMEタイプ | application/x-www-form-urlencoded | エンコード方式 |
accept-charset | - | - | - | 4.0 | 文字セット列挙 | (依存) | サポートする文字セット |
accept | - | - | - | 4.01 | MIMEタイプ列挙 | (依存) | アップロード出来るファイルの種類を指定 |
name | - | - | - | 4.01 | CDATA | (依存) | スクリプトで用いる名前 |
target | - | - | - | (4.0) | 目標フレーム | (依存) | 送信結果を表示するフレーム |
他に指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント) |
入力フォームの大枠を規定する要素です。普通、FORM 要素の中には INPUT や SELECT要素などを用いてコントロールを配置し、ユーザーからのデータ入力を受け付けます。そのデータは FORM 内の送信ボタンによって送信されることになりますが、その送信先や送信の方法を FORM の属性値として指定する必要があります。
action 属性は送信先の URI を指定します。普通は CGI の URL を指定します。mailto: でメールアドレスを指定した際の動作は未定義ですので注意してください。動作の保証はありません。
method 属性はデータの送信方法を指定します。値は get と post の二つで、これらはそれぞれ HTTP 要求メソッドの GET と POST に対応しています。詳しくはFORM の method によるデータ送信方式の違いを参照してください。なお、GET と POST 以外のもの(HEAD,PUT,DELETE など)は指定できません。
enctype は、データの MIMEタイプを指定するものです。既定値は application/x-www-form-urlencoded で、これはデータを URL 形式にエンコードします。通常はこのままで問題ありませんが、フォーム中に <INPUT type="file"> を含む場合は "multipart/form-data" を使用して下さい。
HTML4.01 では name 属性も追加されました。これでスクリプトで用いるための名前を付けることが出来るのですが、名前は id 属性で指定することが推奨されています。name が追加されたのは互換性のためです。
なお、HTML3.2 以降では、FORM 要素の外にフォームコントロールを配置することもできます(HTML2.0 では駄目)。これはスクリプトを起動するためのスイッチだとか、その結果表示だとかに使われるものです。しかしながら、HTML3.2 に対応していると言いつつ FORM の外に配置したコントロールを無視してしまう(手抜き実装の?)ブラウザも存在しますので、注意しましょう。
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
FIELDSET | - | - | - | 4.0 | 必須 | 必須 | ブロック | PCDATA, LEGEND, (ブロックかインラインを好きなだけ)をこの順で |
固有の属性は特にありません。指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント)
フォームコントロールをグループ化する要素です。子要素として LEGEND 要素を含んでいなければなりません。
特に、ある選択肢に複数のラジオボタンやチェックボックスを使う際には、この要素でグループ化しておくことが強く勧められます。そうしておかないと、非視覚系の環境では何がなんだか分からなくなってしまいます。
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
LEGEND | - | - | - | 4.0 | 必須 | 必須 | FIELDSETの子要素 | インライン |
属性 | 適用バージョン | 属性値 | 既定値 | 備考 | |||
---|---|---|---|---|---|---|---|
accesskey | - | - | - | 4.0 | 一文字 | (依存) | アクセスキー |
align | - | - | - | (4.0) | (top | bottom | left | right) | (依存) | 表題の配置 |
他に指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント) |
FIELDSET につける表題です。
accesskey 属性を指定することが推奨されています。Altキーか何かと一緒にここで指定されたキーを押すと、その FIELDSET(の中にある最初のフォーム部品)にフォーカスが移ります。
align属性で表題を上下左右のどこに配置するか決定できますが、この属性は非推奨です。
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
LABEL | - | - | - | 4.0 | 必須 | 必須 | インライン、フォームコントロール | インライン、ただし LABEL を除く |
属性 | 適用バージョン | 属性値 | 既定値 | 備考 | |||
---|---|---|---|---|---|---|---|
for | - | - | - | 4.0 | ID参照 | (依存) | ラベル付けするコントロールのID |
accesskey | - | - | - | 4.0 | 一文字 | (依存) | アクセスキー |
他に指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント) |
LABEL 要素を使うと、文字列をコントロールに関連づけることが出来ます。
押しボタンなどは value の値がラベルとしてボタン表面に表示されますが、文字入力欄などはラベルを持ちません。特に非視覚系の環境では、その入力欄が何を意味するのか判別するのは困難です。LABEL 要素で文字列を関連づけておけば、コントロールが何なのかを判別する助けになります。
LABEL とコントロールを関連づける方法は二通りあります。
一つは for 属性を使う方法です。コントロールにあらかじめ ID 属性を指定しておき、対応する LABEL の for 属性にその ID を指定します。
もう一つは、一つの LABEL要素 の中にラベルとコントロールを入れてしまう方法です。その時、LABEL 要素内には一つのコントロールしか入れられません。そのコントロールと、LABEL要素内のテキストとが関連づけられます。
LABEL 要素には accesskey 属性を指定することが出来ます。これによってフォーカスを受け取った LABEL は、対応するコントロールにフォーカスを渡します。
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
INPUT | 2.0 | 2.x | 3.2 | 4.0 | 必須 | 禁止 | インライン、フォームコントロール | 空 |
属性 | 適用バージョン | 属性値 | 既定値 | 備考 | |||
---|---|---|---|---|---|---|---|
type | - | - | - | 4.0 | (text | password | checkbox | radio | submit | reset | file | hidden | image | button) | text | コントロールの種類 |
name | 2.0 | 2.x | 3.2 | 4.0 | CDATA | (依存) | コントロールの名前 |
value | 2.0 | 2.x | 3.2 | 4.0 | CDATA | (依存) | コントロールの初期値 |
checked | 2.0 | 2.x | 3.2 | 4.0 | (checked) | (依存) | 選択済み |
disabled | - | - | - | 4.0 | (disabled) | (依存) | コントロールを無効に |
readonly | - | - | - | 4.0 | (readonly) | (依存) | コントロールを読み取り専用に |
size | 2.0 | 2.x | 3.2 | 4.0 | CDATA | (依存) | コントロールの文字数/幅 |
maxlength | - | - | - | 4.0 | 数値 | (依存) | 入力文字の最大長 |
src | 2.0 | 2.x | 3.2 | 4.0 | URI | (依存) | イメージボタンの画像 |
alt | - | - | - | 4.0 | テキスト | (依存) | イメージボタンの代替文字列 |
usemap | - | - | - | 4.0 | URI | (依存) | クライアント側イメージマップ |
ismap | - | - | - | 4.01 | (ismap) | (依存) | サーバー側イメージマップ |
tabindex | - | - | - | 4.0 | 数値 | (依存) | タブ順序 |
accesskey | - | - | - | 4.0 | 一文字 | (依存) | アクセスキー |
accept | - | - | - | 4.0 | MIMEタイプ列挙 | (依存) | 受け入れるMIMEタイプ |
align | 2.0 | 2.x | 3.2 | (4.0) | (top | middle | bottom | left | right ) | (依存) | コントロールの配置 |
datasrc | - | - | - | (4.0) | URI | (依存) | (将来のために予約) |
datafld | - | - | - | (4.0) | CDATA | (依存) | (将来のために予約) |
dataformatas | - | - | - | (4.0) | (plaintext|html) | (依存) | (将来のために予約) |
他に指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント) |
さまざまな種類のフォームコントロールを作る要素です。type 属性でフォームコントロールの種類を決定します。
text と password は一行の文字入力フィールドを作ります。password の場合、入力結果が画面上で隠されます(送信時に暗号化されたりはしません。セキュリティは皆無です)。value 属性は入力文字の初期値になります。maxlength 属性を指定して入力文字数を制限することもできます。ここで指定されるのは文字数であってバイト数ではありませんが、バイト数と解釈するブラウザも存在するようです。
checkbox は on/off できるチェックボックスを作ります。ある質問に yes/no で答えるなどという場合に用います。checked 属性を指定することで最初からチェックのついた状態にすることもできます。
radio はラジオボタンを作ります。チェックボックスに似ていますが、複数のボタンに同じ名前を付けた場合、それらは排他的な関係になります。あるラジオボタンが on になると、他のボタンが自動的に off になるのです。択一式の選択肢を用意するのに向いています。
submit, reset, button は、それぞれ送信ボタン、リセットボタン、押しボタンを作ります。送信ボタンを押すと、そのフォーム内のデータが送信されます。リセットボタンを押すと、フォーム内の全コントロールが初期化されます。押しボタンには特に規定の動作はありません。これは onclick 属性などを指定してスクリプトと組み合わせて使います。
file は、ファイル送信のコントロールです。普通、ファイル名選択の窓を表示し、ローカルのファイルを選択できるようにします。送信時にはそのファイルが送信されます(ファイル名ではなく、ファイルそのものを送ります)。accept 属性で受け入れるファイルの種類を制限することもできます。
hidden は隠しコントロールを作ります。これは画面上に表示されませんし、ユーザーの手によって変更することもかないません。CGI に固定の値を送信するのに使います。また、スクリプトによってこっそりと値を送信するのにも使えます。
image はイメージボタンを作ります。src 属性で画像の URI を、alt 属性で代替テキストを指定して下さい。その画像がそのままボタンとして使われます。submit と同じようにフォームデータを送信する機能を持ちますが、押された場所の座標値も送信するので、サーバー側イメージマップとして機能させることもできます。また、usemap 属性でクライアント側イメージマップにすることもできます。
いずれのコントロールにも、name で名前、value で初期値を設定することが出来ます。ただし、submit, reset, button については、value属性はボタン表面に記される文字を表すことになります。
disabled 属性を指定すると、そのコントロールは無効となります。書き換えることも、フォーカスを移すことも出来なくなりますし、値も送信されません。readonly 属性は書き換えだけを禁止します。フォーカスを移すことは出来ますし値も送信されます。スクリプトと組み合わせて、「メールアドレスが空欄だと送信ボタンが押せない」などという仕組みを作ることが可能です。
tabindex 属性はタブ移動順序を指定するものです。タブキーを押したとき、数値の小さいものから順にフォーカスが移動します。
accesskey 属性も指定できますが、これは LABEL に指定した方が良いでしょう。
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
SELECT | 2.0 | 2.x | 3.2 | 4.0 | 必須 | 必須 | インライン、フォームコントロール | OPTGROUP か OPTION を一つ以上 |
属性 | 適用バージョン | 属性値 | 既定値 | 備考 | |||
---|---|---|---|---|---|---|---|
name | 2.0 | 2.x | 3.2 | 4.0 | CDATA | (依存) | コントロールの名前 |
size | 2.0 | 2.x | 3.2 | 4.0 | CDATA | (依存) | コントロールの高さ |
multiple | 2.0 | 2.x | 3.2 | 4.0 | (multiple) | (依存) | 複数選択可能 |
disabled | - | - | - | 4.0 | (disabled) | (依存) | コントロールを無効 |
tabindex | - | - | - | 4.0 | 数値 | (依存) | タブ順序 |
datasrc | - | - | - | (4.0) | URI | (依存) | (将来のために予約) |
datafld | - | - | - | (4.0) | CDATA | (依存) | (将来のために予約) |
dataformatas | - | - | - | (4.0) | (plaintext|html) | (依存) | (将来のために予約) |
他に指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onfocus, onblur, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント) |
選択肢のメニューを作ります。size属性でメニューの行数を決定します。視覚系のブラウザはスクロールバーをつけたり、プルダウン形式のメニューにしたりして表現します。
multiple 属性を指定すると複数選択が可能となります。IE や NN では「コントロールキーを押しながら」選択すると複数選択になります。
他の属性に関しては INPUT 要素と同じです。なお、なぜか accesskey 属性はありません。対応する LABEL要素の方に指定しましょう。
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
OPTGROUP | - | - | - | 4.0 | 必須 | 必須 | SELECT の子要素 | OPTION を一つ以上 |
属性 | 適用バージョン | 属性値 | 既定値 | 備考 | |||
---|---|---|---|---|---|---|---|
label | - | - | - | 4.0 | CDATA | (依存) | グループのラベル |
disabled | - | - | - | 4.0 | (disabled) | (依存) | 選択肢を無効 |
他に指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント) |
OPTION 要素をグループ化します。グループ化された選択肢は、階層化メニューによって表現されることが期待されます。
label 属性でグループに名前を付けることができます。画面上にはそのラベルが表示される……ことが期待されるのですが、OPTGROUP そのものに対応しているブラウザが少ない状況です。
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
OPTION | 2.0 | 2.x | 3.2 | 4.0 | 必須 | 省略可 | SELECT,OPTGROUP の子要素 | #PCDATA |
属性 | 適用バージョン | 属性値 | 既定値 | 備考 | |||
---|---|---|---|---|---|---|---|
selected | 2.0 | 2.x | 3.2 | 4.0 | (selected) | (依存) | 選択済みにする |
value | 2.0 | 2.x | 3.2 | 4.0 | CDATA | (依存) | 送信される値 |
label | - | - | - | 4.0 | CDATA | (依存) | 選択肢のラベル |
disabled | - | - | - | 4.0 | (disabled) | (依存) | 選択肢を無効 |
他に指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント) |
SELECT 要素の個々の選択肢を表します。
selected を指定するとあらかじめ選択済みの状態になります。SELECT 要素に multiple 属性が指定されていれば複数の OPTION に selected をつけることもできますが、multiple でないのに複数 selected を指定するとエラーです。
label 属性を指定すると、選択項目としてそのラベルが表示されます。label 属性がなければ OPTION 要素の中身が選択肢として表示されます。
value 属性で送信される値を指定します。省略時は OPTION 要素の中身が使われます。
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
TEXTAREA | 2.0 | 2.x | 3.2 | 4.0 | 必須 | 必須 | インライン、フォームコントロール | #PCDATA |
属性 | 適用バージョン | 属性値 | 既定値 | 備考 | |||
---|---|---|---|---|---|---|---|
name | 2.0 | 2.x | 3.2 | 4.0 | CDATA | (依存) | コントロールの名前 |
rows | 2.0 | 2.x | 3.2 | 4.0 | 数値 | (必須) | 入力欄の行数 |
cols | 2.0 | 2.x | 3.2 | 4.0 | 数値 | (必須) | 入力欄の列数 |
disabled | - | - | - | 4.0 | (disabled) | (依存) | 選択肢を無効 |
readonly | - | - | - | 4.0 | (readonly) | (依存) | 選択肢を読みとり専用に |
tabindex | - | - | - | 4.0 | 数値 | (依存) | タブ移動順序 |
accesskey | - | - | - | 4.0 | 一文字 | (依存) | アクセスキー |
他に指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント) |
INPUT TYPE=text は一行の入力欄でしたが、TEXTAREA 要素は複数行に渡る入力欄をつくり出します。その行数と列数は col, row 属性で指定します。この二つの属性は必須です。
もっとも、TEXTAREA の入力行数・列数に制限はありません(INPUT と異なり maxlength 属性はありません)。視覚系のブラウザはスクロールバーを表示して、いくらでも入力を受け付けるでしょう。
要素の中身は #PCDATA となっていますが、これは入力欄の初期値を表します。PRE要素と同様に、改行やスペースがそのまま扱われることに注意して下さい。なお、PRE と異なり、TEXTAREA の中身は #PCDATA のみですので、マーク付けをすることは出来ません。
繰り返しますがこのデータは #PCDATA です。CDATA ではありません。& < > などをそのまま書くことは出来ませんので、それぞれ & < > などとする必要があります。
要素名 | 適用バージョン | 開始タグ | 終了タグ | 分類 | 中身 | |||
---|---|---|---|---|---|---|---|---|
BUTTON | - | - | - | 4.0 | 必須 | 必須 | インライン、フォームコントロール | インラインとブロック、ただし A , FORM, FIELDSET, ISINDEX, IFRAME, フォームコントロールを除く |
属性 | 適用バージョン | 属性値 | 既定値 | 備考 | |||
---|---|---|---|---|---|---|---|
name | - | - | - | 4.0 | CDATA | (依存) | コントロールの名前 |
type | - | - | - | 4.0 | (submit | reset | button) | submit | ボタンの種類 |
value | 2.0 | - | - | - | CDATA | (依存) | 送信される値 |
disabled | - | - | - | 4.0 | (disabled) | (依存) | コントロールを無効に |
tabindex | - | - | - | 4.0 | 数値 | (依存) | タブ順序 |
accesskey | - | - | - | 4.0 | 一文字 | (依存) | アクセスキー |
他に指定できる属性……id, class, title, style(中心属性), lang, dir(i18n), onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (イベント) |
ボタンを作ります。INPUT によるボタンと似ていますが、BUTTON要素は中身をそっくりそのままボタン化してしまいますので、アイコンと文字を含むボタンなどを作ることが出来ます。INPUT type=image ではボタンは立体的になりませんが、IMG を含む BUTTON 要素は立体的に表現されることが期待されます。
BUTTON の中には A 要素を含むことが禁止されていることに気をつけて下さい。BUTTON の中でイメージマップを使うのもいけません。
OBJECT 要素もフォームコントロールとなり得ます。たとえば、データ入力に JavaApplet や悪名高い ActiveX コントロールなどを使うことができるのです。
OBJECT要素については、ヘッダ内繰り返し要素 - OBJECT を参照して下さい。