input type の種類一覧｜email・tel・number・date の使い分け

input type の種類一覧とは

<input> は type 属性の値で、見た目も入力方法も検証ルールも変わる要素です。type を省略したり不正な値にしたりすると text として扱われます。適切な type を選ぶと、スマホで最適なキーボードが出る、日付ピッカーが使える、ブラウザ標準の入力チェックが働くなど、JavaScriptを書かずに得られるメリットが多くあります。

ここでは MDN にある主な type を用途別に整理し、実際にどう動くかを確認します。

基本（構文・仕組み）

主な type の一覧です。モバイルの表示は MDN の記載をもとにしています。

datetime は廃止（Obsolete）された値なので、日時には datetime-local を使います。

選び方の基準は「入力値の意味」です。電話番号や郵便番号は数字だけに見えても計算に使わないので、number ではなく tel か text に inputmode="numeric" を組み合わせるほうが適しています。number は先頭の 0 が消える、桁区切りの扱いが難しい、スクロールで値が変わるなどの問題があるためです（私見を含みます）。

サンプルコード（実行結果つき）

<form>
  <p><label>メール <input type="email" name="mail" autocomplete="email" required></label></p>
  <p><label>電話 <input type="tel" name="tel" autocomplete="tel"></label></p>
  <p><label>年齢 <input type="number" name="age" min="0" max="120" step="1"></label></p>
  <p><label>日付 <input type="date" name="d"></label></p>
  <p><label>色 <input type="color" name="c" value="#3366cc"></label></p>
  <p><label>音量 <input type="range" name="v" min="0" max="10" value="4"></label></p>
  <p><label>サイト <input type="url" name="u"></label></p>
  <p><label>検索 <input type="search" name="q"></label></p>
  <p><label>パスワード <input type="password" name="p" autocomplete="new-password" minlength="8"></label></p>
  <p><label>ファイル <input type="file" name="f" accept="image/*"></label></p>
  <p><button>送信</button></p>
</form>

動作確認（検証環境と結果）

• 環境: Windows 11、headless Microsoft Edge 154.0.4258.53（Chromium系）。render.ps1 -Width 500 で描画し、画面を目視。
• 結果（DOM）: JSで type を読み出すと、email,tel,number,date,color,range,url,search,password,file の10種類がすべて有効な type として解釈されました。
• 結果（検証）: メール欄に abc を入れると validity.typeMismatch が true、a@example.com を入れると validity.valid が true になりました。
• 結果（画面）: 日付はピッカーアイコン付き、色は色見本ボタン、range はスライダー、file は「ファイルの選択」ボタンとして描画されました（ボタンの文言はブラウザと言語設定で変わります）。
• 結果（補足）: type="datetime" と type 省略の input はどちらも type が text になりました。type="date" に 2026/10/06 を代入すると値は空文字、2026-10-06 なら反映されました。type="tel" に abc を入れても validity.valid は true（形式チェックなし）でした。
• 未検証: スマホ実機のキーボード表示（MDN の記載に基づく説明です）。
• ログ: C:Tempks2techtestshtml-input-type.md。

input type の種類一覧の注意点

• ブラウザ標準の検証は補助です。サーバー側でも必ず値を検証します。
• type="email" の形式チェックは簡易で、実在確認はできません。
• autocomplete を適切に付けると、入力補助とアクセシビリティ（WCAG 1.3.5）の両方に役立ちます。MDN は autocomplete="off" を安易に使わないよう注意しています。
• date の表示形式は、ブラウザと利用者のロケールに依存します。
• file の accept は選択を絞るヒントであり、セキュリティ対策ではありません。

input type の種類一覧でよくあるミス

• 郵便番号・電話番号・クレジットカード番号を number にして、先頭の 0 が消える。
• placeholder だけでラベルを省略する（label を付けます）。
• type="text" のまま、独自JSで日付のカレンダーを作り込む。
• type="date" の値が YYYY-MM-DD であることを知らず、/ 区切りで初期値を入れて反映されない。
• required を付けたのに、form の novalidate で検証を無効にしている。

ブラウザ対応・バージョン

ここで取り上げた type は、主要な現行ブラウザで使えます。ただし日付や色のピッカーの見た目・操作は各ブラウザ、OSで異なります。特定のバージョンでの差は、MDN の互換性表で最新を確認してください。対応していないブラウザでは text として動作するため、入力自体は可能です。

input type の種類一覧のチェックリスト

• [ ] 入力内容に合った type を選んでいる。
• [ ] すべての入力欄に label が対応している。
• [ ] name と autocomplete を付けている。
• [ ] 電話・郵便番号は number を避けている。
• [ ] サーバー側でも検証している。

input type の種類一覧のFAQ（よくある質問）

Q. 電話番号には type=”tel” だけで十分ですか。
A. tel は形式チェックをしないので、pattern やサーバー側検証が必要です。

Q. 日付の初期値はどう書きますか。
A. value="2026-10-06" のように YYYY-MM-DD で指定します。

Q. number の矢印を消せますか。
A. CSSで見た目を消せますが、そもそも number が適切かを先に見直してください。

input type の種類一覧の関連項目

• フォームの label・name・autocomplete
• コンバージョンアップの為にもフォームの入力必須”以外”の項目は捨てよう。
• セマンティックHTML
• dialog 要素
• HTMLコーダー（マークアップエンジニア）になる為に必要なスキルとは