<form>: フォーム要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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

試してみましょう

<form action="" method="get">  <div>    <label for="name">名前を入力: </label>    <input type="text" name="name" required />  </div>  <div>    <label for="email">メールアドレス: </label>    <input type="email" name="email" required />  </div>  <div>    <input type="submit" value="登録!" />  </div></form>

form.form-example {  display: table;}div.form-example {  display: table-row;}label,input {  display: table-cell;  margin-bottom: 10px;}label {  padding-right: 10px;}

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

属性

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

accept非推奨;

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

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

accept-charset

サーバーが受け付ける文字エンコーディングです。仕様書では、"UTF-8" という大文字小文字を区別しない単一の値を許可しています。このエンコーディングの普遍性を反映したものです。（以前のバージョンの HTML では、文字エンコーディングをカンマ区切るまたは空白区切りで指定することもできました。）

autocapitalize

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

autocomplete

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

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

name

フォームの名前です。値は空文字列であってはならず、また、該当するフォームコレクション内の他のform 要素（存在する場合）の中で固有でなければなりません。この名前は、Window、Document、document.forms オブジェクトのプロパティとなり、それがフォーム要素への参照を含みます。

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: 新しい無名の閲覧コンテキストに読み込みます。これはrel="noopener" を設定するのと同じ動作を提供し、window.opener を設定しません。
_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`