form 要素

概要

HTML の form要素 (<form>) は、ユーザが Web サーバーに情報を送信できるようにするインタラクティブなコントロールを含むドキュメントセクションを表します。

form 要素 には、:valid 及び、:invalid の 2 つの CSS 擬似クラスが使用可能です。

• コンテンツカテゴリ フローコンテンツ、パルパブルコンテンツ
• 許可された内容 フローコンテンツ。 ただし、form 要素の中に別の form 要素を内包する事は許可されていません。
• タグの省略 不可。開始と終了タグの両方が必要。
• 許可された親要素 フローコンテンツを受け入れる全ての要素
• DOM インタフェース HTMLFormElement

属性

他のすべての HTML要素と同じく、この要素はグローバル属性をサポートしています。

accept HTML 4

サーバが受け付けるコンテンツ・タイプのカンマ区切りリスト。

使用上の注意: この属性は HTML5 の仕様から削除されており、既に使用不可となっています。代わりに個々の <input> 要素の accept属性を使用します。

accept-charset

サーバーを受け付ける文字エンコーディングのリスト。リストはスペースまたはカンマで区切ることができます。ブラウザは、それらがリストされている順序を優先順位として使用します。 フォーム要素を含むドキュメントのエンコーディングに対応する場合には、デフォルト値は予約語の "UNKNOWN" となります。
HTML 4: HTML の以前の版では、さまざまな文字エンコーディングをスペースまたはカンマで区切ることができました。これは HTML5 では当てはまらず、スペースだけが適切です。

action

フォーム経由で送信された情報を処理するプログラムの URI。 この値は <button> または <input> の formaction属性 によって上書きする事が可能です。

autocomplete HTML5

フォーム内のコントロールがデフォルトで、ブラウザによる値の入力補完を受けるかを示します。この設定はフォームに属する要素の autocomplete 属性で上書きできます。以下の値が指定可能です。

• off: ユーザは、フォームを使用する度に全ての値を入力するか、もしくは独自の入力補完を使用する必要があります。ブラウザが入力補完をサポートする事はありません。
• on: ブラウザはユーザが以前に入力した値に基づき、これを自動補完の為の候補として使用する事ができます。

注記: ドキュメントで独自の入力補完を提供するため autocomplete を off に設定する場合は、フォーム内で入力補完が可能な各 input 要素でも autocomplete を off に設定するべきです。詳しくは、Google Chrome に関する補足をご覧ください。

enctype

method 属性の値が post であるとき、この属性はフォームをサーバに送信する際に使用する、コンテンツの MIME type を示します。以下の値が指定可能です。

• application/x-www-form-urlencoded: 初期値。属性を指定していない場合、この値が使用されます。
• multipart/form-data: type 属性で "file" を指定した <input> 要素を使用する場合は、この値を使用します。
• text/plain (HTML5)

この値は、<button> または <input> の formtarget属性によって上書きする事が可能です。

method

フォームを送信する際にブラウザが使用する HTTP メソッドです。以下の値が指定可能です。

• post: HTTP POST メソッドに相当します。フォームのデータはボディに収めてサーバに送信します。
• get: HTTP GET メソッドに相当します。フォームのデータは '?' をセパレータとして action 属性の URI に追加して、その結果となる URI をサーバに送信します。フォームが ASCII 文字列だけを含み、まったく副作用がない場合にのみ、このメソッドを使用してください。

この値は、<button> または <input> の formtarget属性によって上書きする事が可能です。

name

フォームの名前です。HTML 4 では推奨されていません (代わりに id を用いるべきです)。name 属性は文書内で固有のものでなくてはならず、また常に何らかの内容を持たねばなりません。

novalidate HTML5

フォームが送信された時にバリデートしない事を示す真偽値です。もしこの属性が指定されていない（つまりバリデートされる）場合、この設定の初期値は <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>

仕様

ブラウザ実装状況

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>.