<form>: フォーム要素
==============

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

試してみましょう
--------

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

属性
--

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

`accept` 
非推奨

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

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

`accept-charset`

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


`autocapitalize` 
Non-standard

これは iOS 版 Safari で使用する標準外の属性であり、テキスト用のフォーム要素が自動的に大文字化を行うかどうかを制御します。フォーム要素の `autocapitalize` 属性は、`<form>` のものより優先します。指定可能な値は次の通りです。

* `none`: 自動大文字化機能を無効にします。
* `sentences`: 文の先頭文字を自動的に大文字化します。
* `words`: 単語の先頭文字を自動的に大文字化します。
* `characters`: すべての文字を自動的に大文字化します。

`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` と同じ動作をします。

この値は、 `<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` (en-US),
 `presentation` |
| DOM インターフェイス | `HTMLFormElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-form-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* HTML フォームガイド
* フォームの作成に使用される、その他の要素: `<button>`, `<datalist>`, `<fieldset>`, `<input>`, `<label>`, `<legend>`, `<meter>`, `<optgroup>`, `<option>`, `<output>`, `<progress>`, `<select>`, `<textarea>`
* フォーム内の要素一覧の取得: `HTMLFormElement.elements`
* ARIA: Form ロール
* ARIA: Search ロール