input
初級読み方：インプット｜英語：Input
テキスト入力欄・ラジオボタン・チェックボックスなどを作るタグで、type 属性で種類を変えるよ。
やさしい説明
input（インプット）タグとは、ユーザーが情報を入力するための要素です。テキスト欄、チェックボックス、ラジオボタンなど、さまざまな入力UIを作れます。
type属性を変えるだけで、見た目と機能がガラッと変わります。type="text"ならテキスト欄、type="checkbox"ならチェックボックスになります。
スマホでtype="email"を使うと、キーボードに@マークが表示されます。type="tel"なら数字キーボードが出ます。ユーザーにとって入力しやすくなる工夫です。
具体例・使い方
<!-- テキスト入力 -->
<input type="text" placeholder="名前を入力">
<!-- メールアドレス（スマホで@キーが出る） -->
<input type="email" placeholder="[email protected]">
<!-- パスワード（●●●で隠れる） -->
<input type="password">
<!-- チェックボックス -->
<input type="checkbox" id="agree">
<label for="agree">利用規約に同意する</label>
<!-- ラジオボタン（グループで1つだけ選択） -->
<input type="radio" name="gender" value="male" id="male">
<label for="male">男性</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">女性</label>よく使うtype一覧
type="text"— 1行のテキスト入力（デフォルト）type="email"— メールアドレス入力（形式バリデーション付き）type="password"— 入力内容を●で隠すtype="number"— 数値入力（スピナーUI付き）type="checkbox"— チェックボックス（複数選択可）type="radio"— ラジオボタン（同名グループで1つだけ選択）type="file"— ファイル選択ダイアログtype="submit"— フォーム送信ボタンtype="tel"— 電話番号入力（スマホで数字キーボード）type="date"— 日付ピッカー
type属性を適切に設定するとスマホのキーボードが最適化されます。メールなら @ キー、電話番号なら数字キーボードが表示されるなど、ユーザーの入力体験が向上します。
JavaScriptで入力値を取得する
// テキスト入力の値を取得
const nameInput = document.getElementById("name");
console.log(nameInput.value); // 入力された文字列
// チェックボックスの状態を確認
const checkbox = document.getElementById("agree");
console.log(checkbox.checked); // true or false
// 入力のたびにリアルタイムで処理（input イベント）
nameInput.addEventListener("input", (e) => {
console.log(e.target.value); // 現在の入力値
});input タグの値は .value プロパティで取得します。チェックボックスやラジオボタンは .checked プロパティで true/false を確認します。
いつ使う？
- ログインフォーム（メールアドレス＋パスワード）を作るとき
- 検索バーやフィルター機能を実装するとき
- アンケートや設定画面でチェックボックス・ラジオボタンを使うとき
- ファイルアップロード機能（type="file"）を作るとき
間違いやすいポイント
❌ labelと紐づけないとアクセシビリティが低下する
label がないとクリック範囲が狭く、スクリーンリーダーでも何の入力欄かわかりません。for 属性と id を一致させるか、label で囲みましょう。
<!-- ❌ labelがないとクリック範囲が狭い -->
<input type="checkbox"> 同意する
<!-- ✅ labelで囲むとテキストもクリックできる -->
<label><input type="checkbox"> 同意する</label>
<!-- ✅ for属性とidで紐づける方法 -->
<input type="checkbox" id="agree">
<label for="agree">同意する</label>❌ inputタグに終了タグは不要（空要素）
<input> は空要素なので </input> は書きません。<input type="text" /> のように自己閉じにするのは任意です。
よくある疑問
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>。空欄のまま送信しようとするとブラウザが警告を出します。
関連用語
📖 関連レッスン
レッスンを見る →