HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<form>
フォーム（Form）要素。ユーザーからのデータ入力を受け付け、サーバーへ送信するためのコンテナです。
info
概要
<form> 要素は、インタラクティブなコントロール（<input>, <textarea>, <button> など）を含む領域を定義し、これらのコントロールで収集されたデータを指定された宛先（URL）に送信するための仕組みを提供します。
オンラインの問い合わせ、検索、ログイン機能などの実装に不可欠です。
play_circle
デモ (静的表示)
HTML (Source)
<form action="/submit-data" method="post">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="user">
<button type="submit" class="button-link">
送信
</button>
</form>
Preview (Result)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| action | フォームデータを送信する先のURLを指定します。サーバー側の処理スクリプトのパスなどを設定します。 |
| method | データの送信方法（HTTPメソッド）を指定します。get: データをURLのクエリパラメータとして送信（デフォルト）post: データをHTTPボディに含めて送信（機密データ向け）
|
| enctype | method="post" の場合に使用するデータのエンコードタイプを指定します。application/x-www-form-urlencoded: デフォルトmultipart/form-data: ファイルアップロード時
|
| target | フォーム送信後の応答をどこで開くかを指定します。_self: 現在のタブ（デフォルト）_blank: 新しいタブまたはウィンドウ
|
| autocomplete | フォーム全体でオートコンプリート機能（入力予測）を有効または無効にします。on: 有効（デフォルト）off: 無効
|
| novalidate | フォーム送信時にブラウザによる自動検証（バリデーション）を無効にします。 |
code
実用例
1. GETメソッドによる検索フォーム
<!-- 検索キーワードがURLのクエリとして送信される -->
<form action="/search" method="get">
<input type="search" name="query" placeholder="キーワードを入力">
<button type="submit">検索</button>
</form>
2. POSTメソッドによるお問い合わせフォーム（ファイルアップロード対応）
<!-- 機密データやファイル送信にはPOSTとmultipart/form-dataが必要 -->
<form action="/contact" method="post" enctype="multipart/form-data">
<input type="text" name="email" required>
<input type="file" name="attachment">
<button type="submit">送信</button>
</form>
3. JavaScriptによるフォーム送信処理の制御
<form id="my-form" action="/api/data" method="post">
<!-- ... フォームコントロール ... -->
<button type="submit">Ajaxで送信</button>
</form>
<script>
// e.preventDefault() で通常の送信を防ぎ、Ajaxで処理する
document.getElementById('my-form').addEventListener('submit', function(e) {
e.preventDefault();
// ここにAjax/Fetch APIでのデータ送信処理を記述
console.log('フォーム送信がJavaScriptで制御されました');
});
</script>
lightbulb
知っておくべき重要事項
gavel
GETとPOSTの使い分け
**GET**は、データの取得や検索など、サーバーに影響を与えない操作に使用します。データはURLに表示されるため、機密情報には不向きです。
**POST**は、データの送信・作成・更新など、サーバーに影響を与える操作や、パスワードなどの機密情報を扱う場合に使用します。データはURLに表示されません。
**GET**は、データの取得や検索など、サーバーに影響を与えない操作に使用します。データはURLに表示されるため、機密情報には不向きです。
**POST**は、データの送信・作成・更新など、サーバーに影響を与える操作や、パスワードなどの機密情報を扱う場合に使用します。データはURLに表示されません。
accessibility_new
アクセシビリティ（フォームとラベル）
フォーム内のすべての入力要素（
これは、
フォーム内のすべての入力要素（
<input>, <textarea>, <select>）には、必ず**<label> 要素**を関連付けてください。これは、
<label>の**for属性**と入力要素の**id属性**を一致させることで実現します。これにより、スクリーンリーダーの利用者が入力項目を理解しやすくなります。