<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" class="form-example">
  <div class="form-example">
    <label for="name">名前を入力: </label>
    <input type="text" name="name" id="name" required />
  </div>
  <div class="form-example">
    <label for="email">メールアドレス: </label>
    <input type="email" name="email" id="email" required />
  </div>
  <div class="form-example">
    <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> 要素をフォーム内の要素が有効であるかどうかに応じてスタイル付けすることができます。

属性

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

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

メモ: この属性は非推奨であり、使用すべきではありません。 代わりに <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>