<input type="number"> 👉 数値の入力欄を作成する

HTMLの<input type="number">は、数値の入力欄を設置するために使います。

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

type="text"を使っても数値の入力はできますが、type="number"をうまく使うとユーザー体験を向上させることができます。

重要なポイントは、数字を入力してもらいたい場合でも、必ずしもtype="number"を使うべきとは限らないということです。このページでは、その使い分け方を順番に説明していきます。

type="number"を使うメリット

ブラウザによっては矢印が表示される

Chromeでのinput type=numberの表示

こちらはデスクトップChromeでの<input type="number">の表示です。入力欄の右端の矢印ボタンを使って数値を上下に変えられます。また、キーボードの「↑」と「↓」を使って値を変えることもできます。

この矢印はブラウザ依存のものなので、全ユーザーが使えるわけではないことに注意しましょう。

スマホで数字のキーボードが開く

Androidの数字キーボード

また、モバイル端末(AndroidとiOS)では<input type="number">がフォーカスされると、気を利かせてすぐに数字が打てるようにキーボードを表示してくれます。

数字のみの入力欄でいちいちキーボードの切り替えをしなくて良いのは、ユーザー体験的にとても大きなポイントですね。

type="number"の注意点

🙅 先頭がゼロから始まる番号の入力欄には使わない

少し分かりづらいのですが、<input type="number">に先頭が0から始まる番号を入力すると、一部のブラウザで0が消されて表示されることがあります。

Firefoxでtype="number"の表示

こちらはFirefoxで値(value)を00015に設定したときのスクショです。先頭の0が消えてしまっていることが分かります。

Chromeでも矢印キーを操作すると先頭の0が消えてしまいます。

カード番号、口座番号、郵便番号にはtype="text"を使う

口座番号や、クレジットカード番号、数字のIDなど、0から始まる可能性がある入力欄にはtype="number"ではなくtype="text"を使いましょう。

🙅 全角→半角数字への自動変換はできない

<input type="number">には全角文字の入力はできません(入力すると無視されます)。「全角数字が入力されたときは、半角数字に変換する」のような処理はtype="text"を使ってJavaScriptでやりましょう。

🙅 型がnumberになるわけではない 中級者向け

type="number"を使っても、フィールドの値が「number型」になるわけではありません。<input type="number">の値は常にstringです。

👆たとえ初期値に数値(number)を渡しても自動でstringに変わります。

使い方と属性

minとmaxで最小値と最大値を設定する

minmaxは、入力可能な最小値と最大値を指定できる属性です(もちろんどちらか片方だけ使ってもOKです)。

Chromeでのmin/maxのエラー表示例

例えばmax="50"(最大値 50)とすると、それより大きい数字が入力されたときにブラウザがエラーを表示してくれるようになります。

<form>
  <input type="number" max="50" value="15">
  <input type="number" max="50" value="51">
  <button type="submit">送信</button>
</form>

👆こちらはCSSの:invalidを使って、エラーになっている入力欄の枠線を赤にしています。数字を50以下にすると、エラーが消えるのが分かると思います。

minとmaxの注意点

  • ブラウザのバリデーションを有効にするためには<form>の中に<input>と送信ボタンを入れる必要があります。
  • あくまでもブラウザ上でのバリデーションです。少し詳しい人であればminmaxを無視して、好きな文字列をサーバーに送ることができてしまいます。サーバー側でもチェックするようにしましょう。
  • エラーの表示のされ方はブラウザにより違うので注意しましょう。

stepで入力可能な単位を指定する

step属性を使うと、入力可能な数字の単位を指定できます。

stepの表示例

例えばstep="10"とすると、数字の動きは10単位になります(矢印・キー操作では数字が10ずつ増減)。「52」のような10単位ではない数字を入れるとエラーになります。

<form>
  <input type="number" step="10">
  <button type="submit">送信</button>
</form>

52と入れるとエラーになる

step="0.1"のように小数点を指定することもできます。

その他のよく使う属性

以下の属性はtype="text"と同じように使用できます。

  • name:フィールドの名前を指定
  • required:入力必須にする
  • placeholder:プレースホルダーを指定
  • autofocus:ページ読み込み時にフォーカスをあてる

🙅 type="number"で使えない属性

sizeは使えない

size属性は<input type="text">などで使える入力欄の幅を指定するものです。これはtype="number"では使えません。入力欄の幅はCSSで変更しましょう。

CSSの例
/* type="number"のinput要素にだけスタイルを適用する例 */
input[type="number"] {
  width: 30px;
}

patternは使えない

pattern属性は、正規表現で使用可能な文字列を決めるものです。こちらもtype="number"では使えません。

応用編

整数のみにする(小数点を禁止)

<input type="number" step="1">とすればブラウザは、1以下の単位=小数点をエラーとして検知してくれます。

リアルタイムにエラーを表示するテクニック

<input type="number" step="1">
<div class="error">整数のみ入力できます</div>

小数点を入れるとエラーメッセージが表示される

👆CSSの:invalidを使えば、エラーの検知されている入力欄のスタイルを変えることができます。これに隣接セレクタ[1]を組み合わせることで、ユーザーの入力に対してリアルタイムでエラーメッセージを表示することができます。

エラーが検知されている入力欄(input:invalid)の隣にあるエラーメッセージ(.error)を表示するというCSSのテクニックです。

別の方法として<type="text">pattern属性に0〜9のみを許容する正規表現を指定する形でも「整数のみ」を実現できます。

<input type="text" pattern="\d*">

矢印を非表示にする

以下のCSSを追加することで、<input type="number">の矢印は非表示にできます。

/* Chrome, Safari, Edge */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

その他の種類の入力欄の使い方は、下記のページでまとめています。


  1. 要素A + 要素B { ~ }とすれば、要素Aのとなりの要素Bに対してのみスタイルをあてることができます。 ↩︎

ブラウザ対応状況

🖥デスクトップ

  • Chromeのアイコン
    Chrome
    6〜
  • Safariのアイコン
    Safari
    5〜
  • Firefoxのアイコン
    Firefox
    29〜
  • Edgeのアイコン
    Edge
    12〜
  • IEのアイコン
    IE
    10〜

📱モバイル

  • Android Chromeのアイコン
    Android Chrome
    79で部分的に対応
  • iOS Safariのアイコン
    iOS Safari
    13.3で部分的に対応

caniuse.comで詳しく見る