この記事の要点

<input> はフォーム部品の万能タグ。type 属性で挙動が変わる（text / email / number / date / checkbox / radio / file / submit ほか） 必須属性は name。これがないとサーバへ値が送られない 主要属性: value / placeholder / required / readonly / disabled / pattern / min/max / autocomplete checkbox / radio は checked 属性で初期選択、radio は同じ name で 1 つだけ選択 アクセシビリティ: 必ず <label> を関連付ける（for / 内包）。スマホでは type によってキーボードが切り替わる

input 要素とは

<input> は HTML フォームの入力部品です。空要素（終了タグなし）で、type 属性に何を指定するかで、テキスト入力 / 数値入力 / ファイル選択 / チェックボックスなど大きく挙動が変わります。

<form action="/submit" method="post">
  <label for="name">名前</label>
  <input type="text" id="name" name="name" required>

  <label for="age">年齢</label>
  <input type="number" id="age" name="age" min="0" max="120">

  <button type="submit">送信</button>
</form>

主な type 一覧

type	用途	備考
text	一行テキスト	既定値。最も汎用
password	パスワード入力	表示が伏字に
email	メールアドレス	送信時に書式チェック、スマホでメール用キーボード
url	URL	送信時に書式チェック
tel	電話番号	スマホで数字キーボード
number	数値	min/max/step
range	スライダ	UI で数値選択
date / time / datetime-local	日付・時刻	ブラウザがピッカーを出す
month / week	月 / 週	同上
checkbox	複数選択 / 単独ON/OFF	checked で初期ON
radio	排他選択	同 name でグループ化
file	ファイルアップロード	accept / multiple
hidden	非表示の値	サーバへ渡す内部値
color	色選択	カラーピッカー
search	検索ボックス	×ボタンが付くブラウザあり
submit / reset / button	送信 / リセット / ボタン	通常は <button> 推奨

共通でよく使う属性

属性	意味
name	サーバに送るキー名。これが無いと値が送信されない
value	初期値 / 現在値
placeholder	未入力時の例示文字列。値ではない
required	必須入力。空送信を阻止
readonly	編集不可。値はサーバへ送られる
disabled	編集不可、かつサーバへ送られない
maxlength / minlength	文字数の上下限
pattern	正規表現でバリデーション
min / max / step	数値 / 日付の上下限と刻み
autocomplete	ブラウザの自動補完カテゴリ（email/off 等）
autofocus	読み込み時にフォーカス
inputmode	スマホのキーボード種別（numeric 等）

type 別サンプル

<!-- メール -->
<label>メール
  <input type="email" name="email" required
         autocomplete="email" placeholder="you@example.com">
</label>

<!-- パスワード -->
<label>パスワード
  <input type="password" name="password" required
         minlength="8" autocomplete="new-password">
</label>

<!-- 数値（0-100、5刻み） -->
<input type="number" name="score" min="0" max="100" step="5">

<!-- 日付 -->
<input type="date" name="birthday" max="2026-06-11">

<!-- チェックボックス -->
<label><input type="checkbox" name="agree" required> 同意する</label>

<!-- ラジオ（同じ name でグループ） -->
<label><input type="radio" name="gender" value="m"> 男性</label>
<label><input type="radio" name="gender" value="f"> 女性</label>
<label><input type="radio" name="gender" value="o" checked> 回答しない</label>

<!-- ファイル（画像のみ、複数可） -->
<input type="file" name="photo" accept="image/*" multiple>

<!-- 隠し値 -->
<input type="hidden" name="csrf_token" value="abc123">

<!-- パターン: 郵便番号 -->
<input type="text" name="zip" pattern="\d{3}-?\d{4}" placeholder="123-4567">

ラベル付けとアクセシビリティ

スクリーンリーダ・タップ範囲・自動補完のすべての観点で、<input> には必ず <label> を関連付けます。書き方は 2 通り。

<!-- 1. for と id で結ぶ -->
<label for="email">メール</label>
<input type="email" id="email" name="email">

<!-- 2. label の中に input を入れる -->
<label>メール
  <input type="email" name="email">
</label>

JavaScript からの値取得

const email = document.querySelector('input[name="email"]');
console.log(email.value);          // 値

// チェックボックス / ラジオは checked
const agree = document.querySelector('input[name="agree"]');
console.log(agree.checked);

// ラジオの選択値
const checked = document.querySelector('input[name="gender"]:checked');
console.log(checked?.value);

// 変更イベント
email.addEventListener('input', e => console.log(e.target.value));

よくある落とし穴

症状	原因 / 対処
値が送信されない	name 無し、または disabled
ラジオが両方選択できる	name が違う。同 name でグループ化
ファイルが送信されない	<form enctype="multipart/form-data"> 必須
iOS でズームしてしまう	font-size を 16px 以上に
パスワードマネージャに保存されない	autocomplete="current-password" / new-password を指定

関連

• HTML — マークアップ言語
• フォーム要素 — 親カテゴリ
• label要素 — アクセシビリティ必須
• button要素 — フォーム送信ボタン
• form要素 — 入力を取りまとめる