form
初級読み方：フォーム｜英語：Form
入力欄やボタンをまとめるフォームの入れ物タグだよ。
やさしい説明
form（フォーム）タグとは、ユーザーからの入力を受け付けて送信するための要素です。
学校のアンケート用紙をイメージしてください。名前を書く欄、選択肢にチェックする欄、最後に「提出」ボタンがありますよね。formタグはそのアンケート用紙全体を囲む枠のようなものです。
formの中に input（入力欄）や button（ボタン）を配置します。ユーザーが入力して送信ボタンを押すと、データがサーバーに送られます。
ログイン画面、お問い合わせフォーム、検索バー——これらはすべてformタグで作られています。
図解：フォームの構造
具体例・使い方
<form action="/submit" method="post">
<label for="name">名前</label>
<input type="text" id="name" name="name" required>
<label for="email">メール</label>
<input type="email" id="email" name="email" required>
<label for="message">メッセージ</label>
<textarea id="message" name="message" rows="4"></textarea>
<button type="submit">送信</button>
</form>label の for 属性と input の id 属性を一致させると、ラベルをクリックしたときに入力欄がフォーカスされます。アクセシビリティとユーザビリティの両方で重要です。
JavaScriptでフォーム送信を制御する
// フォーム送信をJavaScriptで処理する
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
e.preventDefault(); // デフォルトの送信（ページ遷移）を止める
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
// バリデーション
if (!name || !email) {
alert("必須項目を入力してください");
return;
}
// fetchでAPIに送信
fetch("/api/contact", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name, email }),
});
});いつ使う？
- お問い合わせページ・問い合わせフォーム
- ログイン・新規登録画面
- 検索バー（
method="get"でURLにパラメータを追加） - アンケート・アンケートフォーム
- ショッピングカートのチェックアウト
間違いやすいポイント
❌ form タグで囲み忘れる
input や button を form の外に書くと、送信ボタンを押してもデータが送られません。入力欄とボタンは必ず form の中に入れましょう。
❌ name 属性を付け忘れる
input に name 属性がないと、サーバーにデータが届きません。また JavaScript で FormData を使うときも name 属性が必要です。name="email" のように必ず付けましょう。
よくある疑問
Q: formタグなしでinputを使える？
A: 表示はされますが、データの送信ができません。入力フォームにはformタグで囲みましょう。JavaScriptでfetch送信する場合は省略することもあります。
Q: GETとPOSTの違いは？
A: GETはURLにデータが表示される（検索向き）、POSTはURLに表示されない（パスワードなど秘密のデータ向き）。ログインフォームはPOSTを使いましょう。
Q: 送信ボタンを押してもページが移動しないようにするには？
A: JavaScriptでevent.preventDefault()を使います。フォームのsubmitイベントをキャッチして、ページ遷移を止めてからfetchでデータを送信します。
関連用語
📖 関連レッスン
レッスンを見る →