タイトル: input要素
SEOタイトル: HTML input要素 完全ガイド（type 一覧 / text / email / number / date / file / checkbox / radio / 属性 / バリデーション / アクセシビリティ）
| この記事の要点 |
|
input 要素とは
は HTML フォームの入力部品です。空要素（終了タグなし）で、type 属性に何を指定するかで、テキスト入力 / 数値入力 / ファイル選択 / チェックボックスなど大きく挙動が変わります。
主な 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 | 送信 / リセット / ボタン | 通常は |
共通でよく使う属性
| 属性 | 意味 |
|---|---|
name | サーバに送るキー名。これが無いと値が送信されない |
value | 初期値 / 現在値 |
placeholder | 未入力時の例示文字列。値ではない |
required | 必須入力。空送信を阻止 |
readonly | 編集不可。値はサーバへ送られる |
disabled | 編集不可、かつサーバへ送られない |
maxlength / minlength | 文字数の上下限 |
pattern | 正規表現でバリデーション |
min / max / step | 数値 / 日付の上下限と刻み |
autocomplete | ブラウザの自動補完カテゴリ（email/off 等） |
autofocus | 読み込み時にフォーカス |
inputmode | スマホのキーボード種別（numeric 等） |
type 別サンプル
ラベル付けとアクセシビリティ
スクリーンリーダ・タップ範囲・自動補完のすべての観点で、 には必ず を関連付けます。書き方は 2 通り。
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 でグループ化 |
| ファイルが送信されない | |
| iOS でズームしてしまう | font-size を 16px 以上に |
| パスワードマネージャに保存されない | autocomplete="current-password" / new-password を指定 |
関連
- HTML — マークアップ言語
- フォーム要素 — 親カテゴリ
- label要素 — アクセシビリティ必須
- button要素 — フォーム送信ボタン
- form要素 — 入力を取りまとめる