【第8回】HTMLでフォームを作ってみよう

💡 フォームってなに？

フォームとは、ユーザーが情報を入力して送信するための仕組みです。
お問い合わせページや、会員登録などでよく見かけます。

HTMLでは、<form> タグを使ってフォーム全体を作り、 中に <input> や <textarea>、<button> を入れていきます。

---

🧩 よく使うフォームタグ

タグ	用途
<form>	入力欄全体をまとめる枠
<input type="text">	1行のテキスト入力欄
<textarea>	複数行のテキスト入力欄
<button>	ボタン（送信など）

---

📝 実際の書き方（コード例）

<form action="/submit" method="post">
  <input type="text" name="username" placeholder="お名前"><br><br>
  <textarea name="message" rows="4" cols="30" placeholder="メッセージ"></textarea><br><br>
  <button type="submit">送信する</button>
</form>

---

👀 表示される見た目（イメージ）

下のコードを実際にブラウザで見ると、こんなふうに表示されます👇

---

【お名前】
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

【メッセージ】
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

📩 送信する

---

※上の「＿＿＿」は入力欄のイメージです。

---

🔍 よくあるミスと注意点

• <form> タグを忘れると送信できない
• name 属性をつけ忘れるとデータが送れない
• placeholder を入れないと入力の目的が分かりにくい
• <textarea> の rows を小さくすると表示が狭すぎる

---

✅ 覚えておきたいポイントまとめ

• <form> タグでフォーム全体を囲む
• <input> は1行、<textarea> は複数行の入力欄
• placeholder はヒントとして便利
• <button type="submit"> で送信ボタンを作る

📌 次回のテーマ

👉【第9回】HTMLでテーブルを作ってみよう📋
表の作り方や、行・列の構成をわかりやすく解説します！