概要
HTML form 要素 (<form>) は、ユーザが Web サーバーに情報を送信できるようにするインタラクティブなコントロールを含むドキュメントセクションを表します。
<form> 要素には、:valid 及び、:invalid の 2 つの CSS 擬似クラスが使用可能です。
| コンテンツカテゴリ | フローコンテンツ、パルパブルコンテンツ |
|---|---|
| 許可された内容 | フローコンテンツ。ただし、<form> 要素の中に別の <form> 要素を内包することは許可されていません。 |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | フローコンテンツを受け入れるすべての要素 |
| DOM インターフェイス | HTMLFormElement |
属性
他のすべての HTML要素と同じく、この要素はグローバル属性をサポートしています。
acceptHTML 4- サーバが受け付けるコンテンツ・タイプのカンマ区切りリスト。
accept-charset- サーバーを受け付ける文字エンコーディングのリスト。リストはスペースまたはカンマで区切ることができます。ブラウザは、それらがリストされている順序を優先順位として使用します。デフォルト値である予約語 "UNKNOWN" は、form 要素を含むドキュメントのエンコーディングと同じであることを示します。
以前のバージョンの HTML では、さまざまな文字エンコーディングをスペースまたはカンマで区切ることができました。これは HTML5 では当てはまらず、スペースだけが適切です。 action- フォーム経由で送信された情報を処理するプログラムの URI。 この値は
<button>または<input>のformaction属性 によって上書きする事が可能です。 autocapitalize- これは iOS 版 Safari Mobile で使用する非標準属性であり、子孫のテキスト型フォームコントロールでユーザが入力または編集したテキスト値を自動的に大文字に変換するか否か、またどのように変換するかを制御します。
autocapitalize属性を個別にフォームコントロール子孫要素で指定した場合は、フォーム全体に設定したautocapitalizeより優先します。非推奨とされていない値は、iOS 5 以降で使用できます。既定値はsentencesです。以下の値を指定できます。none: 自動大文字化機能を無効にします。sentences: 文の先頭文字を自動的に大文字化します。words: 単語の先頭文字を自動的に大文字化します。characters: すべての文字を自動的に大文字化します。on: iOS 5 から非推奨です。off: iOS 5 から非推奨です。
autocompleteHTML5- input 要素がデフォルトで、ブラウザによる値の入力補完を受けるかを示します。この設定はフォームに属する要素の
autocomplete属性で上書きできます。以下の値が指定可能です。off: ユーザは、フォームを使用する度に全ての値を入力するか、もしくは独自の入力補完を使用する必要があります。ブラウザが入力補完をサポートする事はありません。on: ブラウザはユーザが以前に入力した値に基づき、これを自動補完の為の候補として使用する事ができます。
-
注記: ドキュメントで独自の入力補完を提供するため
autocompleteをoffに設定する場合は、フォーム内で入力補完が可能な各input要素でもautocompleteをoffに設定するべきです。詳しくは、Google Chrome に関する補足をご覧ください。 enctypemethod属性の値がpostであるとき、この属性はフォームをサーバに送信する際に使用する、コンテンツの MIME type を示します。以下の値が指定可能です。application/x-www-form-urlencoded: 初期値。属性を指定していない場合、この値が使用されます。multipart/form-data:type属性で "file" を指定した<input>要素のために使用する値です。text/plain (HTML5)
この値は、
<button>または<input>のformenctype属性によって上書きする事が可能です。method- フォームを送信する際にブラウザが使用する HTTP メソッドです。以下の値が指定可能です。
post: HTTP POST メソッドに相当します。フォームのデータはボディに収めてサーバに送信します。get: HTTP GET メソッドに相当します。フォームのデータは '?' をセパレータとしてaction属性の URI に追加して、その結果となる URI をサーバに送信します。フォームが ASCII 文字列だけを含み、まったく副作用がない場合にのみ、このメソッドを使用してください。
この値は、
<button>または<input>のformmethod属性によって上書きする事が可能です。 name- フォームの名前です。HTML 4 では推奨されていません (代わりに
idを用いるべきです)。name 属性は文書内で固有のものでなくてはならず、また常に何らかの内容を持たねばなりません。 novalidateHTML5- フォームが送信された時にバリデートしない事を示す真偽値です。もしこの属性が指定されていない(つまりバリデートされる)場合、この設定の初期値は
<button>もしくは<input>のformnovalidate属性によって上書きする事が可能です。 target- フォームを送信した後に受け取った応答の表示位置を示す名前またはキーワードです。これは、HTML 4 ではフレームの名前またはキーワードでした。HTML5 では、ブラウズ・コンテキスト の名前またはキーワードです (例えば、タブ、ウィンドウ、インラインフレームなど)。以下のキーワードは特別な意味を持ちます:
_self: 応答を現在と同じ HTML 4 フレーム (または HTML5 ブラウズ・コンテキスト) に表示します。この値は、属性が指定されていない場合のデフォルト値です。_blank: 応答を新しい名前のつけられていない、HTML 4 ウィンドウまたは HTML5 のブラウズ・コンテキストに読み込みます。_parent: 応答を現在のフレームの HTML 4 フレームセットの親要素または HTML5 の現在の親ブラウズ・コンテキストに読み込みます。親要素がない場合、このオプションは_selfと同じ振る舞いをします。_top: HTML 4 では、応答を元のウィンドウ全体に読み込み、他のフレームをすべてキャンセルします。HTML5 では、応答をトップレベルのブラウズ・コンテキストに読み込みます (現在のブラウズ・コンテキストの祖先にあたり、それ以上親のない要素です)。親要素がない場合、このオプションは_selfと同じ振る舞いをします。- iframename: 応答を、名前のついた
<iframe>に読み込みます。
HTML5: この値は、
<button>または<input>のformtarget属性によって上書きする事が可能です。
例
<!-- GET 要求を送信する簡単なフォーム -->
<form action="">
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
<input type="submit" value="Save">
</form>
<!-- POST 要求を送信する簡単なフォーム -->
<form action="" method="post">
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
<input type="submit" value="Save">
</form>
<!-- fieldset、 legend、label を用いたフォームのマークアップの例 -->
<form action="" method="post">
<fieldset>
<legend>Title</legend>
<input type="radio" name="radio" id="radio"> <label for="radio">Click me</label>
</fieldset>
</form>
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WHATWG HTML Living Standard <form> の定義 |
現行の標準 | |
| HTML5 <form> の定義 |
勧告 | |
| HTML 4.01 Specification <form> の定義 |
勧告 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.0 (1.7 or earlier) | (有) | (有) | (有) |
novalidate 属性 |
1.0 | 4.0 (2.0) | 10 | ? | ? |
| 機能 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | (有) | 1.0 (1.0) | (有) | (有) | (有) |
novalidate 属性 |
? | 4.0 (2.0) | (有) | ? | ? |
Google Chrome に関する補足
Google Chrome の自動補完 UI の要件は異なっており、フォームだけでなく input 要素の autocomplete が off であるかにも依存します。特に form 要素の autocomplete を off に、またフォーム内の input 要素の autocomplete フィールドを設定しないときは、ユーザが input 要素で自動補完の候補を求めた場合に、Chrome が "このフォームでは自動補完が無効" というメッセージを表示します。一方、form および input 要素の両方で autocomplete を off に設定すると、ブラウザはメッセージを表示しません。このため、独自の入力補完を使用する各 input で autocomplete を off に設定するとよいでしょう。
関連情報
- HTML フォームガイド
- フォームの作成に使用される、その他の要素:
<button>,<datalist>,<fieldset>,<input>,<keygen>,<label>,<legend>,<meter>,<optgroup>,<option>,<output>,<progress>,<select>,<textarea>