HTML input type 一覧｜全22種の用途・値の形式・検証結果の早見表

RJC Techチーム

HTMLの <input> 要素の type 属性とは、入力欄の種類（文字・メール・数値・日付・チェックボックスなど）を決める属性で、現行のHTML標準には22種類あります。type を正しく選ぶと、スマホで適したキーボードが出て、ブラウザが入力内容を自動でチェックしてくれます。

この記事では、全22種を「用途・キーボード・値の形式・主な属性」の一覧表とコピペ用コード にまとめ、Playwright ＋ Chromium 141 で 初期値、required の効き方、validity、value の形式 を実測しました。2026/09/28 を date に入れると空になる、全角数字と number、tel は数字以外も通る、など 日本語フォームのつまずきも実行結果で 確認できます。

input type 全22種の早見表

type	用途	スマホのキーボード（目安）	`value` の形式	主な属性
`text`	1行の文字	通常	文字列	`maxlength` `minlength` `pattern` `placeholder`
`password`	パスワード（伏せ字）	通常	文字列	`autocomplete` `minlength`
`email`	メールアドレス	`@` と `.` のある配列	`taro@example.com`	`multiple` `pattern`
`tel`	電話番号	数字のテンキー	文字列（形式チェックなし）	`pattern` `autocomplete="tel"`
`url`	URL	`/` や `.com` のある配列	`https://example.com`	`pattern`
`number`	数値	数字・記号	`42.5`（文字列）	`min` `max` `step`
`range`	スライダー	なし	`50`（既定は中間値）	`min` `max` `step`
`date`	日付	日付ピッカー	`2026-09-28`	`min` `max` `step`
`time`	時刻	時刻ピッカー	`09:30`	`min` `max` `step`
`datetime-local`	日付＋時刻	ピッカー	`2026-09-28T09:30`	`min` `max` `step`
`month`	年月	ピッカー	`2026-09`	`min` `max`
`week`	年と週	ピッカー	`2026-W39`	`min` `max`
`color`	色	カラーピッカー	`#ff0000`（小文字6桁）	`list`
`file`	ファイル選択	ファイル・カメラ選択	`C:\fakepath\ファイル名`	`accept` `multiple` `capture`
`checkbox`	複数選択・同意	なし	`on`（`value` 未指定時）	`checked` `required`
`radio`	1つを選ぶ	なし	`value` の値	`name` `checked` `required`
`search`	検索語	改行キーが「検索」	文字列	`autocomplete`
`hidden`	画面に出さない値	—	指定した文字列	`value`
`submit`	送信ボタン	—	ボタンの文字	`formaction` `formmethod`
`reset`	初期値に戻す	—	ボタンの文字	—
`button`	汎用ボタン（JS用）	—	ボタンの文字	—
`image`	画像の送信ボタン	—	クリック座標 `x` `y` を送信	`src` `alt` `width` `height`

キーボードの種類は端末・OS・IMEによって変わります（この列は実機では未確認の目安です）。

本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。

（記載例）出典：株式会社RJC「HTML input type 一覧｜全22種の用途・値の形式・検証結果の早見表」

コピペ用：全22種のサンプルフォーム

すべての入力欄に <label> を付けた、そのまま動く完成形 です。name を付けたものだけが送信されます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>input type サンプル</title>
</head>
<body>
<form action="/order" method="post">
  <p><label>氏名 <input type="text" name="name" autocomplete="name" required></label></p>
  <p><label>パスワード <input type="password" name="pw" autocomplete="new-password" minlength="8" required></label></p>
  <p><label>メール <input type="email" name="email" autocomplete="email" required></label></p>
  <p><label>電話番号 <input type="tel" name="tel" autocomplete="tel" pattern="\d{2,4}-\d{2,4}-\d{3,4}" placeholder="090-1234-5678"></label></p>
  <p><label>サイトURL <input type="url" name="site" placeholder="https://"></label></p>
  <p><label>数量 <input type="number" name="qty" min="1" max="10" step="1" value="1"></label></p>
  <p><label>音量 <input type="range" name="vol" min="0" max="100" step="10"></label></p>
  <p><label>お届け日 <input type="date" name="day" min="2026-10-01"></label></p>
  <p><label>時刻 <input type="time" name="at" step="900"></label></p>
  <p><label>日時 <input type="datetime-local" name="dt"></label></p>
  <p><label>対象月 <input type="month" name="ym"></label></p>
  <p><label>対象週 <input type="week" name="wk"></label></p>
  <p><label>テーマ色 <input type="color" name="color" value="#1a73e8"></label></p>
  <p><label>添付 <input type="file" name="files" accept=".pdf,image/*" multiple></label></p>
  <p><label><input type="checkbox" name="agree" value="yes" required> 利用規約に同意する</label></p>
  <fieldset>
    <legend>サイズ</legend>
    <label><input type="radio" name="size" value="s" required> S</label>
    <label><input type="radio" name="size" value="m"> M</label>
  </fieldset>
  <p><label>キーワード <input type="search" name="q"></label></p>
  <input type="hidden" name="token" value="abc123">
  <p>
    <input type="submit" value="送信">
    <input type="reset" value="クリア">
    <input type="button" value="プレビュー" id="preview">
    <input type="image" src="send.png" alt="送信" width="80" height="32">
  </p>
</form>
</body>
</html>

Chromium 141 で開くと22種すべてが認識され、ラベルのない入力欄は0件、空のまま検証すると name pw email agree size が未入力として検出されました。ファイルを送るときは <form> に enctype="multipart/form-data" が必要です。

Chromium 141 での実測①：初期値と required の効き方

環境：Playwright 1.56 ＋ Chromium 141.0.7390.37（ヘッドレス）。 各typeの <input required> を作り、何も入力していない状態で調べました。

type	初期 `value`	検証対象（`willValidate`）	空で `checkValidity()`	`valueMissing`
text / password / email / tel / url / search	`""`	true	false	true
number / date / time / datetime-local / month / week	`""`	true	false	true
`range`	`"50"`	true	true	false
`color`	`"#000000"`	true	true	false
`file`	`""`	true	false	true
`checkbox`	`"on"`	true	false（未チェック）	true
`radio`（`name` あり）	`"on"`	true	false（グループ内が未選択）	true
`submit`	`""`	true	true	false
`hidden` / `reset` / `button` / `image`	`""`	false	true	false

range と color は必ず値を持つため required は効きません。 range の既定値は min と max の中間です。
checkbox の value は未指定だと on で、送信データにも agree=on として入ります。
hidden などは検証の対象外（willValidate: false）です。
22種はすべて指定どおり認識され、未知の type="foo" は text として返りました。

Chromium 141 での実測②：値の形式と validity

input.value にJavaScriptで値を入れ、正規化後の value と validity を調べました。 「値」列が空欄になっているものは、ブラウザが形式外と判断して値を捨てた（サニタイズした）ケースです。

文字系（email / url / tel / text）

type・属性	入れた値	結果の `value`	判定
email	`taro@example.com`	そのまま	valid
email	`taro@example`	そのまま	valid（ドットなしも通る）
email	`taro`	そのまま	`typeMismatch`
email	`ｔａｒｏ＠example.com`（全角）	そのまま	`typeMismatch`
email	`たろう@example.com`	そのまま	`typeMismatch`
email（カンマで2件）	`a@example.com,b@example.com`	そのまま	`typeMismatch`（`multiple` を付けると valid）
url	`https://example.com`	そのまま	valid
url	`example.com`	そのまま	`typeMismatch`（スキームが必要）
tel	`abc-あいう`	そのまま	valid（形式チェックなし）
tel ＋ `pattern`	`09012345678`	そのまま	`patternMismatch`
text ＋ `pattern="[0-9]+"`	`abc`	そのまま	`patternMismatch`
text ＋ `maxlength="3"`	`あいうえお`（JSで代入）	そのまま	valid
text ＋ `minlength="3"`	`ab`（JSで代入）	そのまま	valid

maxlength / minlength は、ユーザーの入力には効きますが、JSで代入した値は検証されませんでした。 キーボード入力で abcdef を打つと、maxlength="3" の欄には abc だけが入りました。

数値・範囲（number / range）

属性	入れた値	結果の `value`	判定
`step="1"`	`1.5`	`1.5`	`stepMismatch`（「1 と 2 が近い有効値」と表示）
`min="1" max="10"`	`0`	`0`	`rangeUnderflow`
`min="1" max="10"`	`11`	`11`	`rangeOverflow`
なし	`1e3`	`1e3`	valid（指数表記も数値）
なし	`abc`	`""`	valid（値が捨てられた）
range `min="0" max="100"`	`150`	`100`	valid（範囲内に丸められた）
range `step="10"`	`33`	`30`	valid（stepに合わせて丸められた）

number は小数を受け付けたいとき step="0.1" や step="any" が必要 です（既定の step は 1）。

日付・時刻・色

type	入れた値	結果の `value`	判定
date	`2026-09-28`	`2026-09-28`	valid
date	`2026/09/28`	`""`	値が捨てられた
date	`2026-02-30`	`""`	存在しない日付は捨てられた
date ＋ `min="2026-10-01"`	`2026-09-28`	そのまま	`rangeUnderflow`
time	`09:30`	`09:30`	valid
time	`9:30`	`""`	2桁が必要
time	`09:30:15`	そのまま	`stepMismatch`（既定 step は60秒）
datetime-local	`2026-09-28 09:30`	`2026-09-28T09:30`	空白が `T` に正規化
datetime-local	`2026-09-28T09:30:00`	`2026-09-28T09:30`	秒の `:00` が省略された
month	`2026-09` / `2026-9`	`2026-09` / `""`	2桁が必要
week	`2026-W39` / `2026-W54`	`2026-W39` / `""`	存在しない週は捨てられた
color	`#FF0000`	`#ff0000`	小文字に正規化
color	`red` / `#f00`	`#000000`	6桁の16進数以外は黒になった

画面の表示が「2026/09/28」でも、value と送信値は常に YYYY-MM-DD です。サーバー側はこの形式を前提に受け取れます。秒まで入力させたい time は step="1" を付けます。

JavaScriptで値を取り出す

取り出し方	結果
number の `value`（`42.5`）	`"42.5"`（文字列）
number の `valueAsNumber`	`42.5`（数値）
date の `valueAsDate`（`2026-09-28`）	`2026-09-28T00:00:00.000Z`（UTCの0時）
time の `valueAsNumber`（`09:30`）	`34200000`（0時からのミリ秒）
file の `value`	`C:\fakepath\sample.txt`（実パスは隠される）
file の `files`	`sample.txt text/plain 6`（名前・MIME・バイト数）

new FormData(form) で集めると次のようになりました（未チェックの checkbox と disabled の欄は含まれず、readonly は含まれる）。

[["d","2026-09-28"],["c","on"],["col","#000000"],["r","50"],["h","token123"],["ro","y"],["m","a@example.com,b@example.com"]]

属性の使い分け表

属性	使える type	役割	例
`required`	文字系・数値・日付・file・checkbox・radio	未入力を送信させない	`required`
`pattern`	text / tel / email / url / search / password	正規表現で形式を指定（全体一致）	`pattern="\d{3}-\d{4}"`
`min` / `max`	number / range / 日付系	範囲を指定	`min="1" max="10"`
`step`	number / range / 日付系	刻み（`any` で制限なし）	`step="0.01"`
`minlength` / `maxlength`	文字系	文字数（ユーザー入力に効く）	`maxlength="20"`
`multiple`	email / file	複数入力・複数ファイル	`multiple`
`accept`	file	選べるファイルの種類	`accept=".pdf,image/*"`
`inputmode`	文字系（主に text）	出すキーボードだけを指定	`inputmode="numeric"`
`autocomplete`	ほぼすべて	自動入力の種類	`autocomplete="email"`

inputmode の値と使いどころ

inputmode は検証せずキーボードだけを変える属性 です。

値	出るキーボード（目安）	使いどころ
`numeric`	0〜9 のテンキー	郵便番号、認証コード、会員番号
`decimal`	数字＋小数点	金額・重さなど小数を含む値
`tel`	電話用テンキー	電話番号（`type="tel"` と同じ）
`search`	改行キーが「検索」	検索欄

<!-- 郵便番号：数値ではない（先頭0あり）ので number にしない -->
<label>郵便番号
  <input type="text" name="zip" inputmode="numeric" autocomplete="postal-code"
         pattern="\d{3}-?\d{4}" maxlength="8">
</label>

<!-- 6桁の確認コード -->
<label>確認コード
  <input type="text" name="code" inputmode="numeric" autocomplete="one-time-code"
         pattern="\d{6}" maxlength="6">
</label>

autocomplete のよく使う値

値	用途	値	用途
`name`	氏名	`email`	メール
`family-name` / `given-name`	姓 / 名	`tel`	電話番号
`postal-code`	郵便番号	`address-level1`	都道府県
`username`	ログインID	`current-password`	ログイン時のパスワード
`new-password`	新規登録のパスワード	`one-time-code`	ワンタイムコード
`off`	自動入力しない

日本語入力で気をつけること

状況	実測・仕様	おすすめの書き方
number に全角 `１２３` をIMEで確定	`keyboard.insertText` で入力すると `123` に変換された	数値ならそのまま number でよい
number に全角 `１２３` をJSで代入	`""`（値が捨てられた）	サーバー側でも全角→半角を変換
number に `12e` と入力	`value` は `""`、`badInput: true`	エラー表示を用意
email に全角の `ｔａｒｏ＠`	`typeMismatch`	エラー文で「半角で」と案内
tel に全角 `０９０ー１２３４`	valid のまま受け付けた	`pattern` を付け、サーバーで正規化
番号を number にする	`0123` の `valueAsNumber` は `123`、↑キーで `124` に変わった	`type="text" inputmode="numeric"`

tel は形式をチェックしません。 pattern を付け、サーバー側でハイフン・全角を正規化します。ブラウザの検証は入力の手助けで、サーバー側の検証と組み合わせる のが基本です。

ブラウザ対応の注意（2026年9月時点）

month と week は、MDN では Limited availability で、Firefox と Safari のデスクトップ版では type="text" として表示されます。 その他の20種は主要ブラウザで利用できます。

month を使うときは、未対応ブラウザ向けに pattern="[0-9]{4}-[0-9]{2}" を付ける と、テキスト入力になっても形式をそろえられます（MDN の推奨）。年と月を別々の <select> にする方法もあります。

アクセシビリティ：label と説明文の付け方

入力欄には必ず <label> を関連付けます。 クリックでフォーカスが移り、項目名も読み上げられます。placeholder はラベルの代わりにしません。

<!-- 1. for と id で関連付け -->
<label for="qty">数量</label>
<input type="number" id="qty" name="qty" min="1" max="10"
       aria-describedby="qty-help" required>
<p id="qty-help">1〜10の整数で入力してください。</p>

<!-- 2. ラジオボタンは fieldset と legend でグループ名を付ける -->
<fieldset>
  <legend>配送方法</legend>
  <label><input type="radio" name="ship" value="normal" required> 通常</label>
  <label><input type="radio" name="ship" value="express"> お急ぎ</label>
</fieldset>

独自のエラー文を出したいときは setCustomValidity() を使います。

const email = document.querySelector('input[type="email"]');
email.addEventListener('input', () => {
  email.setCustomValidity(
    email.validity.typeMismatch ? 'メールアドレスを半角で入力してください（例：taro@example.com）' : ''
  );
});