form
初級読み方：フォーム｜英語：Form
入力欄やボタンをまとめるフォームの入れ物タグだよ。いつ使う？ お問い合わせフォーム、ログイン画面、検索ボックスなど、ユーザーにデータを入力してもらうときに使うよ。<form>の中に<input>や<button>を入れるよ。間違いやすいポイント: <form>タグで囲まないとデータが送信できないよ。また、action属性（送信先URL）とmethod属性（GETかPOST）を指定し忘れると意図通りに動かないことがあるよ。
やさしい説明
form（フォーム）タグとは、ユーザーからの入力を受け付けて送信するための要素です。
学校のアンケート用紙をイメージしてください。名前を書く欄、選択肢にチェックする欄、最後に「提出」ボタンがありますよね。formタグはそのアンケート用紙全体を囲む枠のようなものです。
formの中にinput（入力欄）やbutton（ボタン）を配置します。ユーザーが入力して送信ボタンを押すと、データがサーバーに送られます。
ログイン画面、お問い合わせフォーム、検索バー——これらはすべてformタグで作られています。
図解：フォームの構造
具体例・使い方
<form action="/submit" method="post">
<label for="name">名前</label>
<input type="text" id="name" name="name">
<label for="email">メール</label>
<input type="email" id="email" name="email">
<button type="submit">送信</button>
</form>いつ使う？
お問い合わせページ、ログイン画面、アンケート、検索機能など、ユーザーに何かを入力してもらう場面で使います。
間違いやすいポイント
❌ formタグで囲み忘れる
inputやbuttonをformの外に書くと、送信ボタンを押してもデータが送られません。入力欄とボタンは必ずformの中に入れましょう。
❌ name属性を付け忘れる
inputに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でデータを送信します。
関連用語
📖 関連レッスン
レッスンを見る →