form 要素

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

<form> 要素には、:valid および、:invalid の 2 つの CSS 疑似クラスが使用可能です。

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

属性

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

accept HTML 4
サーバーが受け付けるコンテンツ・タイプのカンマ区切りリスト。
使用上の注意: この属性は HTML5 の仕様から削除されており、すでに使用不可となっています。代わりに個々の <input> 要素の accept 属性を使用します。
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 から非推奨です。
autocomplete HTML5
input 要素がデフォルトで、ブラウザーによる値の入力補完を受けるかを示します。この設定はフォームに属する要素の autocomplete 属性で上書きできます。以下の値が指定可能です。
  • off: ユーザーは、フォームを使用するたびにすべての値を入力するか、もしくは独自の入力補完を使用する必要があります。ブラウザーが入力補完をサポートすることはありません。
  • on: ブラウザーはユーザーが以前に入力した値に基づき、これを自動補完のための候補として使用することができます。
ほとんどの現行ブラウザー (Firefox 38+、Google Chrome 34+、IE 11+) では autocomplete 属性を設定しても、ブラウザーのパスワードマネージャーがユーザーにログイン情報 (ユーザー名やパスワード) を保存したいかを問い合わせる、またユーザーが同意した場合に次回以降ページを訪れた際にログイン情報を自動入力することは抑制できません。autocomplete 属性とログインフィールド をご覧ください。

注記: ドキュメントで独自の入力補完を提供するため 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> の formenctype 属性によって上書きすることが可能です。

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

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

name
フォームの名前です。HTML 4 では推奨されていません (代わりに id を用いるべきです)。HTML 5 ではドキュメント内のフォーム間でユニークである必要があり、また空文字列であってはいけません。
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 属性によって上書きすることが可能です。

例

HTML コンテンツ

<!-- GET 要求を送信する簡単なフォーム -->
<form action="" method="get">
  <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>

仕様

仕様書 策定状況 コメント
HTML Living Standard
<form> の定義		 現行の標準  
HTML5
<form> の定義		 勧告  
HTML 4.01 Specification
<form> の定義		 勧告 初期定義

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0[1] (有) 1.0 (1.7 or earlier) (有) (有) (有)
novalidate attribute 1.0 (有) 4.0 (2.0) 10 ? ?
機能 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) 1.0 (1.0) (有) (有) (有)
novalidate attribute ? (有) 4.0 (2.0) (有) ? ?

[1] Google Chrome の自動補完 UI の要件は異なっており、フォームだけでなく input 要素の autocomplete が off であるかにも依存します。特に form 要素の autocomplete を off に、またフォーム内の input 要素の autocomplete フィールドを設定しないときは、ユーザーが input 要素で自動補完の候補を求めた場合に、Chrome が "このフォームでは自動補完が無効" というメッセージを表示します。一方、form および input 要素の両方で autocomplete を off に設定すると、ブラウザーはメッセージを表示しません。このため、独自の入力補完を使用する各 input で autocomplete を off に設定するとよいでしょう。

関連情報

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: yyss, ethertank
 最終更新者: yyss,