HTML Living Standard/form

form 要素

<form> 要素は、ユーザーが入力を送信するためのインターフェースを提供する要素です。ウェブページ内でデータをサーバーに送信したり、データの処理を実行するためのフォームを作成します。

カテゴリ

フローコンテンツ

使用される文脈

フローコンテンツが期待される場所

コンテンツモデル

フローコンテンツ。ただし、ネストされた <form> 要素を含むことはできません。

タグの省略

開始タグと終了タグは必須です。

コンテンツ属性

<form> 要素には以下の属性が使用できます：

グローバル属性
action — フォーム送信時の送信先URL（既定値は現在のURL）
method — 使用するHTTPメソッド（GET または POST、既定値は GET）
enctype — フォームデータのエンコードタイプ（例: application/x-www-form-urlencoded、multipart/form-data）
target — フォーム送信結果を表示するブラウザのコンテキスト（例: _self, _blank, _parent, _top）
novalidate — フォーム送信時にHTMLのバリデーションをスキップする
autocomplete — 自動補完を有効または無効にする（on または off）
name — フォームの名前
rel — フォームと送信先の関係性を指定（rel="noopener" など）
accept-charset — サーバーがサポートする文字エンコーディング（例: UTF-8）
autocapitalize — フォーム内でのテキスト入力の自動キャピタライゼーション設定

使用例

基本的なフォームの例

以下は、ユーザーの名前とメールアドレスを入力する簡単なフォームです。

<form action="/submit" method="post">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name" required><br>
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email" required><br>
  <button type="submit">送信</button>
</form>

GET メソッドを使用する例

以下は、URLクエリ文字列を使用してデータを送信する例です。

<form action="/search" method="get">
  <label for="query">検索:</label>
  <input type="text" id="query" name="q">
  <button type="submit">検索</button>
</form>

ファイルアップロードフォーム

以下は、ファイルをアップロードするフォームの例です。

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="file">ファイルを選択:</label>
  <input type="file" id="file" name="file">
  <button type="submit">アップロード</button>
</form>

ターゲットウィンドウを指定する例

フォーム送信結果を新しいタブに表示する例です。

<form action="/result" method="post" target="_blank">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
  <button type="submit">送信</button>
</form>

バリデーションの設定

<form> 要素には、ネイティブのフォームバリデーションをサポートしています。たとえば、required 属性を使用すると必須入力フィールドを設定できます。

<form>
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">送信</button>
</form>

注意事項

<form> 要素を適切に使用し、アクセシビリティを向上させるために、ラベルを使用することが推奨されます。
フォームの送信先である action 属性を省略した場合、現在のページにデータが送信されます。
ネストされた <form> 要素を使用することはできません。
GET メソッドは送信データがURLに含まれるため、セキュリティやプライバシーに配慮が必要です。