<form>: FORM 要素

最終更新：2026-10-13

<form>FORM 要素

<form> 要素はユーザーデータを収集・送信するためのコンテナーです。フォーム部品（<input>・<select>・<textarea> など）を包み、action で送信先 URL、method で HTTP メソッドを指定します。

カテゴリ	フォーム
コンテンツモデル	フローコンテンツ（<form> の入れ子不可）
許可される親要素	フローコンテンツを受け入れる要素
閉じタグ	必要 `</form>` タグ
ステータス	標準

📝 構文

<form action="送信URL" method="post">
  フォーム部品
  <input type="submit" value="送信">
</form>

⚙️ 属性

この要素はグローバル属性に加え、以下の属性をサポートします：

属性	値	説明
`action`	URL	The URL where form data is submitted. デフォルト: `当前页 URL`
`method`	Keyword	The HTTP method used to submit. `get` — Data appended to the URL query string (default). `post` — Data sent in the request body.
`name`	Text	Form name for JavaScript reference.
`autocomplete`	Keyword	Whether browser autofill is enabled. `on` — Enable autofill (default). `off` — Disable autofill.
`novalidate`	Boolean	Skip HTML5 form validation on submit.
`target`	Keyword	Where to display the submission result. デフォルト: `_self`

すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ	Chrome	Edge	Firefox	Safari	Opera
<form>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザでサポート

ヒント： アクセシビリティとクリック領域拡大のため、フォーム部品には <label> を組み合わせましょう。

❓ よくある質問

Qform の method は get と post のどちらを使うべきですか？

AGET はデータを URL に付け、ブックマークでき、長さ制限があります。検索や絞り込みなど読み取り専用の操作に向きます。POST はデータをリクエストボディに置き、登録・ログイン・決済などデータを変更する操作に向きます。パスワードや機密情報を扱う場合は必ず POST です。

Qform には送信ボタンが必須ですか？

A必須ではありません。入力欄が1つのフォームなら、多くのブラウザで Enter キーでも送信できます。JS で form.requestSubmit() や form.submit() を呼ぶ方法もあります。ただしユーザビリティとアクセシビリティのため、明示的な送信ボタンは常にベストプラクティスです。

Qaction 属性は省略できますか？

Aできます。省略時は現在のページ URL に送信されます（HTML5 の挙動）。SPA では form と preventDefault() を組み合わせて既定の送信を止め、fetch で送る構成も定番です。action を書いても書かなくても、阻止そのものには影響しません。