【第15回】HTMLフォームを深掘りしよう

---

💡 <input>タグってなに？

<input> タグは、ユーザーから何かを「入力してもらう」ためのタグです。
でも実は、type 属性の指定によって見た目も機能もガラッと変わる万能選手なんです！

---

🧩 よく使う type の種類

type属性	説明	表示例
text	1行のテキスト入力欄	<input type="text">
email	メールアドレス入力（形式チェックあり）	<input type="email">
number	数値のみ入力可能	<input type="number">
checkbox	チェックボックス	<input type="checkbox">
radio	ラジオボタン（選択肢）	<input type="radio">
submit	送信ボタン	<input type="submit">

---

🧩 入力欄をつくってみよう

<p>名前：<input type="text" name="username"></p>

👇 表示結果：

名前： [　　　　　]

✅ ポイント：
name 属性は送信時に必要になる「名前ラベル」のようなものです。

---

🧩 チェックボックスをつくってみよう

<p><input type="checkbox" name="agree"> 利用規約に同意する</p>

👇 表示結果：

☐ 利用規約に同意する

✅ ポイント：
複数選択OK！ 選ばれた項目だけが送信されます。

---

🧩 ラジオボタンをつくってみよう

<p>
  <input type="radio" name="gender" value="male"> 男性  
  <input type="radio" name="gender" value="female"> 女性
</p>

👇 表示結果：

○ 男性　○ 女性

✅ ポイント：
name を同じにすると、どれか1つしか選べなくなります！

---

🔍 <input> の特徴と注意点

• <input> タグは「閉じタグなし」で使うのが基本（自己完結型）
• type 属性を変えるだけで多機能に使える
• CSSと組み合わせて、見た目を整えることも可能！

---

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

✔️ <input> はフォームの基本中の基本！
✔️ type の使い分けでさまざまな入力が実現可能
✔️ name 属性や value 属性もセットで覚えよう
✔️ 今後の <form> タグの理解にもつながります！

---

今後のフォーム設計にも役立つ！HTMLタグをサッと調べたいときに便利👇

✅ 太字・斜体・下線タグもこれ一冊でばっちり
✅ 初心者がつまずく「フォーム入力」系も図解でわかる！

---

📌 次回のテーマ

【第16回】YouTubeを埋め込もう（<iframe>タグ）
<iframe> を使って動画をHTMLに表示させてみます🎥