HTML の <form> 要素は、ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。

<form> 要素には、 CSS の :valid および :invalid 疑似クラスを使用して整形することが可能です。

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

属性

この要素にはグローバル属性があります。

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 属性とログインフィールドをご覧ください。

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

enctype
method 属性の値が post であるとき、この属性はフォームをサーバーに送信する際に使用する、コンテンツの MIME タイプを示します。以下の値が指定可能です。
  • 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 コンテンツ

<!-- Simple form which will send a GET request -->
<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> の定義
勧告 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり あり あり あり あり
accept あり あり あり あり あり あり
accept-charset あり あり あり あり あり あり
action あり あり あり あり あり あり
autocapitalize なし なし なし なし なし なし
autocomplete あり1 あり あり あり あり あり
enctype あり あり あり あり あり あり
method あり あり あり あり あり あり
name あり あり あり あり あり あり
novalidate1 あり410 ? ?
target あり あり あり あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり あり あり あり あり
accept あり あり あり あり あり あり あり
accept-charset あり あり あり あり あり あり あり
action あり あり あり あり あり あり あり
autocapitalize なし なし なし なし なし あり なし
autocomplete あり あり あり あり あり あり あり
enctype あり あり あり あり あり あり あり
method あり あり あり あり あり あり あり
name あり あり あり あり あり あり あり
novalidate ? ? あり4 ? ? ?
target あり あり あり あり あり あり あり

1. The Google Chrome UI for auto-complete request varies, depending on whether autocomplete is set to off on <input> elements as well as their form. Specifically, when a form has autocomplete set to off and its <input> element's autocomplete fttribute is not set, then if the user asks for autofill suggestions for the <input> element, Chrome might display a message saying 'autocomplete has been disabled for this form.' On the other hand, if both the form and the input element have autocomplete set to off, the browser will not display that message. For this reason, you should set autocomplete to off for each <input> that has custom auto-completion.

関連情報

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

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