input
初級読み方：インプット｜英語：Input
テキスト入力欄・ラジオボタン・チェックボックスなどを作るタグで、type 属性で種類を変えるよ。いつ使う？ ユーザーに名前やメールアドレスを入力してもらうとき、選択肢を選んでもらうときに使うよ。間違いやすいポイント: type属性を書き忘れるとデフォルトの"text"になるよ。メールアドレスならtype="email"、パスワードならtype="password"と正しく指定しよう。また、<input>は閉じタグ不要の空要素だよ。
やさしい説明
input（インプット）タグとは、ユーザーが情報を入力するための要素です。テキスト欄、チェックボックス、ラジオボタンなど、さまざまな入力UIを作れます。
type属性を変えるだけで、見た目と機能がガラッと変わります。type="text"ならテキスト欄、type="checkbox"ならチェックボックスになります。
スマホでtype="email"を使うと、キーボードに@マークが表示されます。type="tel"なら数字キーボードが出ます。ユーザーにとって入力しやすくなる工夫です。
具体例・使い方
<!-- テキスト入力 -->
<input type="text" placeholder="名前を入力">
<!-- メールアドレス（スマホで@キーが出る） -->
<input type="email" placeholder="example@mail.com">
<!-- パスワード（●●●で隠れる） -->
<input type="password">
<!-- チェックボックス -->
<input type="checkbox" id="agree">
<label for="agree">利用規約に同意する</label>いつ使う？
ログインフォーム（メール＋パスワード）、検索バー、アンケートの選択肢など、ユーザーに何かを入力・選択してもらう場面で使います。
間違いやすいポイント
❌ labelと紐づけない
<!-- ❌ labelがないとクリック範囲が狭い -->
<input type="checkbox"> 同意する
<!-- ✅ labelで囲むとテキストもクリックできる -->
<label><input type="checkbox"> 同意する</label>よくある疑問
Q: inputのtype属性にはどんな種類がある？
A: text（テキスト）、email（メール）、password（パスワード）、number（数値）、date（日付）、checkbox（チェックボックス）、radio（ラジオボタン）、file（ファイル選択）などがあります。
Q: inputにラベルをつけるには？
A: <label for="email">メール</label><input id="email" type="email"> のように、labelのfor属性とinputのid属性を一致させます。クリックでフォーカスが移ります。
Q: 入力を必須にするには？
A: required属性を追加します。例: <input type="email" required>。空欄のまま送信しようとするとブラウザが警告を出します。
関連用語
📖 関連レッスン
レッスンを見る →