form 要素は「入力をひとまとめにして“送信するための枠”」
<form> は、 「ユーザーの入力をひとまとまりにして、どこかへ送るための“フォーム全体の箱”」 です。
テキストボックス チェックボックス ラジオボタン セレクトボックス 送信ボタン
こういった「入力パーツ」は全部、 基本的に <form> の中に入れて使います。
「画面上の入力 UI」を “送信できるひとつのフォーム”としてまとめる役割 を持っているのが <form> です。
form の基本構造と「中に何を入れるか」
入力パーツは全部 form の中に入れる
いちばんシンプルな例からいきます。
<form>
<p>お名前：</p>
<input type="text" name="username">
<p>メールアドレス：</p>
<input type="email" name="email">
<button type="submit">送信</button>
</form>
ここでの構造はこうです。
<form>… フォーム全体の枠<input>… 実際の入力欄<button type="submit">… フォームを送信するボタン
重要なのは「送信ボタンも含めて、入力に関わるものは form の中に入れる」こと。
form の外にあるボタンは、 「そのフォームを送信するボタン」としては機能しません。
action と method：フォームが「どこへ」「どうやって」送られるか
action 属性は「送信先の URL」
フォームは「送信ボタンを押したとき、どこかへ飛ぶ」動きをします。 その「飛び先」を決めるのが action 属性です。
<form action="/contact/submit">
<!-- 入力欄いろいろ -->
<button type="submit">送信</button>
</form>
この場合、 送信ボタンを押すと /contact/submit にデータが送られます。
action が空だと「今のページ自身」に送る」 という挙動になります。
method 属性は「送信の方法（GET か POST）」
送信方法を決めるのが method 属性です。
<form action="/search" method="get">
<input type="text" name="q">
<button type="submit">検索</button>
</form>
これは「GET で送る」例。 URL が ?q=入力値 のように変わります。
<form action="/contact/submit" method="post">
<input type="text" name="username">
<input type="email" name="email">
<button type="submit">送信</button>
</form>
これは「POST で送る」例。 データは URL ではなく、リクエストボディに乗ります。
ざっくり覚えるなら、
- 検索フォームなど「URLに残ってもいい・ブックマークされても困らない」 →
get - お問い合わせ・ログインなど「URLに出したくない・長くなる」 →
post
というイメージで OK です。
action と method は form の“性格”を決める超重要ポイントなので、必ず意識して書く癖をつけてください。
name 属性と「送信されるデータの形」
各入力欄には name を必ず付ける
フォームで送られるデータは、 「name 属性の値：入力された値」 というペアになります。
<form action="/contact/submit" method="post">
<input type="text" name="username">
<input type="email" name="email">
<button type="submit">送信</button>
</form>
ユーザーが
- username → “MONO”
- email → “mono@example.com”
と入力して送信すると、 サーバー側にはだいたいこんなイメージで届きます。
username = "MONO"email = "mono@example.com"
name がない入力欄は、送信されるデータに含まれません。
「見た目だけ入力欄があるけど、サーバーには届かない」 という事故が起きやすいので、 入力欄を作ったら「まず name を付ける」を習慣にしてほしいです。
form と JavaScript：送信を“自分で”扱うパターン
送信イベントをキャッチして、JS で処理する
最近の Web アプリでは、 フォームを「ページ遷移せずに JavaScript で処理する」ことが多いです。
そのときも <form> はめちゃくちゃ重要な役割を持ちます。
HTML：
<form id="contactForm">
<input type="text" name="username" placeholder="お名前">
<input type="email" name="email" placeholder="メールアドレス">
<button type="submit">送信</button>
</form>
<p id="result"></p>
JavaScript：
const form = document.querySelector("#contactForm");
const result = document.querySelector("#result");
form.addEventListener("submit", (event) => {
event.preventDefault(); // ← これで「通常の送信（ページ遷移）」を止める
const formData = new FormData(form);
const username = formData.get("username");
const email = formData.get("email");
result.textContent = `送信された内容：${username} / ${email}`;
});
ここで重要なのは、
submitイベントは form に対して発生するevent.preventDefault()で「通常の送信」を止められるnew FormData(form)で「name：値」のセットを簡単に取り出せる
という 3 点です。
form は「送信イベントの中心」になる要素 なので、JavaScript で扱うときも 「とりあえず form を取って、submit を監視する」 というパターンが定番になります。
form の中のボタンの type に気をつける
type=”submit” と type=”button” の違い
フォームの中にボタンを置くとき、 type を意識しないと事故ります。
<form>
<button>送信</button>
</form>
実はこれ、 デフォルトで type="submit" になります。
つまり、このボタンを押すとフォームが送信されます。
一方、「送信はしないただのボタン」が欲しいときは、 明示的に type="button" にします。
<form>
<button type="button">プレビュー</button>
<button type="submit">送信</button>
</form>
- プレビューボタン → 送信しない（JS で何かする用）
- 送信ボタン → フォームを送信する
フォームの中のボタンは、type を必ず意識して書く。 ここをサボると、「押した瞬間に勝手に送信されるボタン」が量産されます。
form を使うか迷ったときの判断基準
「これは“ユーザーの入力を送信する場面”か？」
自分にこう聞いてみてください。
「ここでユーザーに何か入力してもらって、その結果をどこかに送りたいか？」 「送信ボタンを押したら、何かしら“処理”が走る想定か？」
YES なら <form> が出番です。
検索フォーム お問い合わせフォーム ログインフォーム 設定変更フォーム
こういうものは全部、 「入力をひとまとめにして送信する」場面なので、 form を使うのが自然です。
逆に、 単なるボタンや UI だけで、 送信という概念がないなら form はいりません。
初心者として「form タグ」で絶対に掴んでほしいこと
<form> は、 「ユーザーの入力をひとまとめにして、“送信できるひとつのフォーム”にするための箱」 です。
中に入力欄や送信ボタンを入れる action で送信先、method で送信方法（GET / POST）を決める 各入力欄には name を付ける（これが送信されるキーになる） JavaScript では submit イベントを form に付けて、送信を自分で扱える ボタンの type（submit / button）を意識して書く
あなたが <form> を書くときに、 「この枠は“入力を送って何かを起こす場所”なんだよな？」 と一度自分に問いかけられるようになったら、 もう form を“なんとなく囲むタグ”ではなく、 “ユーザーの入力とアプリのロジックをつなぐ、めちゃくちゃ重要な入口”として扱えている状態です。
