<form>: フォーム要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

試してみましょう

CSS の :valid および :invalid 擬似クラスを使用すると、<form> 要素をフォーム内の要素が有効であるかどうかに応じてスタイル付けすることができます。

属性

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

accept 非推奨;

サーバーが受け付けるコンテンツ型のカンマ区切りリストです。

メモ: この属性は非推奨であり、使用すべきではありません。 代わりに <input type=file> 要素の accept 属性を使用してください。

accept-charset

サーバーが受け付ける空白区切りの文字エンコーディングです。ブラウザーは、列挙されたされた順に使用します。既定値は、ページと同じエンコーディングを意味します。（以前のバージョンの HTML では、文字エンコーディングをカンマで区切ることもできました。）

autocapitalize

入力されたテキストを自動的に大文字にするかどうか、また、その場合はどのような方法で大文字にするかを制御します。詳細については、 autocapitalize グローバル属性のページをご覧ください。

autocomplete

input 要素が既定で、ブラウザーによる値の入力補完を受けるかを示します。フォーム要素の autocomplete 属性は、 <form> のものより優先します。指定可能な値は次の通りです。

off: ブラウザーは自動的には項目を補完しません。（ブラウザーは、ログインフォームが疑わしい場合、これを無視する傾向があります。autocomplete 属性とログインフィールドを参照してください。
on: ブラウザーは自動的に項目を補完することがあります。

name

フォームの名前。この値は空文字列であってはならず、また、フォームコレクションに含まれる form 要素がある場合は、その中で一意でなければなりません。

rel

注釈や、このフォームが作成するリンク種別を制御します。注釈には external、nofollow、opener、noopener、noreferrer があります。リンク種別には help、prev、next、search、license があります。rel の値はこれらの列挙値の空白区切りの値です。

フォーム送信のための属性

以下の属性は、フォーム送信中の動作を制御します。

action

フォーム経由で送信された情報を処理するプログラムの URL。この値は <button>、<input type="submit">、<input type="image"> の formaction 属性によって上書きすることが可能です。この属性は method="dialog" が設定されている場合は無視されます。

enctype

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

application/x-www-form-urlencoded: 既定値です。
multipart/form-data: フォームが <input> の type=file を含む場合に使用してください。
text/plain: デバッグ用に有用です。

この値は、<button>、<input type="submit">、<input type="image"> の formenctype 属性によって上書きすることが可能です。

method

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

post: POST メソッドです。フォームのデータはリクエスト本体として送信されます。
get: GET メソッドです。フォームのデータは action 属性の URL に ? で区切って追加されます。このメソッドはフォームに副作用がない場合に使用してください。
dialog: フォームが <dialog> 要素の中にある場合に使用し、送信の操作を行うと、ダイアログが閉じて submit イベントを発行しますが、データを送信したりフォームをクリアしたりはしません。

この値は、 <button>、<input type="submit">、<input type="image"> の formmethod 属性によって上書きすることが可能です。

novalidate

フォームを送信するときに検証しないことを示す論理値です。この属性を指定していない（つまり検証される）場合は、既定の設定を <button>、<input type="submit">、<input type="image"> の formnovalidate 属性で上書きすることが可能です。

target

フォームを送信した後に受け取ったレスポンスの表示先を示す名前またはキーワードです。これは 閲覧コンテキスト（タブ、ウィンドウ、インラインフレームなど）の名前またはキーワードです。以下のキーワードは特別な意味を持ちます。

_self（既定値）: 現在と同じ閲覧コンテキストに読み込みます。
_blank: 無名の新しい閲覧コンテキストに読み込みます。
_parent: 現在の親の閲覧コンテキストに読み込みます。親がない場合は、_self と同じ動作をします。
_top: 最上位の閲覧コンテキスト（すなわち、現在の閲覧コンテキストの祖先に当たり、親がないもの）に読み込みます。親がない場合は、_self と同じ動作をします。
_unfencedTop: 埋め込みのフェンスフレーム内でフォームからレスポンスを読み込み、最上位のフレームに表示します（つまり、他の予約済み出力先とは異なり、フェンスフレームのルートを越えて移動します）。フェンスフレーム内でのみ利用できます。

この値は、 <button>、<input type="submit">、<input type="image"> の formtarget 属性によって上書きすることが可能です。

例

html

<!-- 現在の URL に GET リクエストを送信するフォーム -->
<form method="get">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- 現在の URL に POST リクエストを送信するフォーム -->
<form method="post">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- fieldset, legend, label のあるフォーム -->
<form method="post">
  <fieldset>
    <legend>Do you agree to the terms?</legend>
    <label><input type="radio" name="radio" value="yes" /> Yes</label>
    <label><input type="radio" name="radio" value="no" /> No</label>
  </fieldset>
</form>

結果

技術的概要

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

仕様書

Specification
HTML Standard # the-form-element

ブラウザーの互換性

BCD tables only load in the browser