<input type="number">

number 型に対応していないブラウザーでは、 number 入力欄は text 入力欄で代替されます。

入力欄に入力された数字の値を表す数値です。 value 属性に数値を設定することで、次のように入力欄の既定値を設定することができます。

<input id="number" type="number" value="42" />

すべての <input> 型で共通する属性に加え、 number 型の入力欄は次の属性にも対応しています。

list 属性の値は、同じ文書内にある <datalist> 要素の id です。 <datalist> は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち、この type と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。

この入力欄が受け付ける最大値です。要素に入力された value がこれを超えた場合、要素は制約検証に失敗します。 max 属性の値が数値でない場合、要素は最大値を持ちません。

この値は min 属性の値より大きいか、等しくしなければなりません。

この入力欄が受け付ける最小値です。要素の value がこれより小さい場合、要素は制約検証に失敗します。 min 属性の値が数値でない場合、要素は最小値を持ちません。

この値は max 属性の値より小さいか、等しくしなければなりません。

placeholder 属性は文字列で、その欄にどのような種類の情報が期待されているかについてのユーザーに対する短いヒントを提供します。これは期待されているデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることはできません。

コントロールの内容がある書字方向 (LTR または RTL) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。詳しくは、双方向テキストでの Unicode コードの使い方（英語）を参照してください。

論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 value は、 JavaScript コードから直接 HTMLInputElement の value プロパティを設定することで変更することができます。

step 属性は値が吸着する粒度を指定する数値、または後述する特殊な値 any です。刻みの基準値に等しい値（指定されていれば min、そうでなければ value、どちらも設定されていなければ適切な既定値）のみが妥当となります。

文字列値の any は、刻みがなく、どの値でも許可されることを意味します（min や max など、他の制約には制限されます）。

number 入力欄の既定の刻み値は 1 であり、刻みの基準値が整数ではない場合を除いて、整数の入力のみを許可します。

number 入力型は、増減する数値にのみ、特にスピンボタンによる増減が使い勝手として有益な場合に使用すべきです。 number 入力型は、多くの国の郵便番号やクレジットカード番号のような、数字だけで構成されているが、厳密には数値ではない値には適していません。数値以外の入力には、 <input type="tel"> や他の <input> 型で inputmode 属性をつけるなど、別の入力型を使うことを検討してみてください。

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="number"> 要素は、フォームに数値を入力するユーザーインターフェイスとロジックを構築する際に、作業を簡略化するのに役立ちます。 type の値に正しく number を設定して数値入力を作成すると、入力された文字列が数値かどうかが自動的に検証されるようになり、通常は値を 1 つずつ上下するための上下ボタンの組み合わせが表示されます。

モバイルブラウザーでは、ユーザーが値を入力しようとした時に、数値入力に適した特別なキーボードを表示することで、使い勝手をさらに向上させます。

最も基本的なフォームでは、次のように数値入力を実装することができます。

<label for="ticketNum">購入したいチケット数を入力してください。</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

数値入力は空の場合と単一の数値が入力された場合に妥当とみなされますが、それ以下は無効とみなされます。 required 属性が使用された場合は、入力欄が空の場合に妥当とみなされなくなります。

フォームがどのような入力データを取るのかについての行内のヒントを提供すると、有益なことがあります。これはページのデザインでそれぞれの <input> に説明のラベルを付けることができない場合に特に重要になります。ここでプレイスホルダーが登場します。プレイスホルダーはほとんどの場合、入力される value が取るべき値の形式のヒントを説明するために使用される値です。これは value が "" の時に入力欄の中に表示されます。入力欄にデータが入力されると、プレイスホルダーは非表示になり、入力欄が空欄になると、プレイスホルダーは再度表示されます。

ここで、 number 入力欄に "10 の倍数" というプレイスホルダーを設定します。なお、プレイスホルダーが非表示になったり再表示されたりするのは、入力欄の中身を変更したときです。

<input type="number" placeholder="10 の倍数" />

既定で、数値を増減させるための増減ボタンは、 1 刻みで値を増減させます。 step 属性を設定することで、刻みの量を指定する数値の値を変更できます。上記の例は10の倍数を指定すると言っていますので、 step の値を 10 にすることが妥当でしょう。

<input type="number" placeholder="10 の倍数" step="10" />

この例で、増減ボタンが値を 1 ずつではなく 10 ずつ増減させることが分かるでしょう。手動で 10 の倍数ではない数値を入力することができますが、無効な値とみなされるでしょう。

min オヨビ max 属性を使用して、入力欄が保持できる最小値と最大値を指定することができます。例えば、最小値を 0 に、最大値を 100 に設定する例をご紹介しましょう。

<input type="number" placeholder="10 の倍数" step="10" min="0" max="100" />

更新したこの版では、増減ボタンで 0 未満や 100 より大きい数値を設定することができないことにお気づきでしょう。手動でこの範囲の外の値を入力することもできますが、無効な値とみなされるでしょう。

数値入力の問題の一つが、既定で刻みが 1 になっていることです。小数を含む数値（たとえば "1.0"）を入力しようとすると、無効な値とみなされるでしょう。小数が必要な値を入力させたい場合は、これを step の値に反映させる必要があります（例えば step="0.01" で小数第 2 位まで許可します）。単純な例を示します。

<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />

この例では 0.0 から 10.0 までで、小数第 2 位までの値が許容されます。この例では "9.52" は妥当になりますが、 "9.521" は妥当ではありません。

<input> 要素で type が number の場合、 size のような寸法を決める属性には対応していません。入力欄の寸法を変更するには CSS に頼る必要があります。

例えば、入力欄の幅を数字 3 桁の入力に必要なだけの幅に調整するには、 HTML に id を設定し、これから入力欄を短くしたときに文字列が表示できなくならないように、プレイスホルダーを短縮します。

<input
  type="number"
  placeholder="x10"
  step="10"
  min="0"
  max="100"
  id="number" />

それから、要素の id が #number である要素の幅を短くします。

#number {
  width: 3em;
}

結果は以下のように表示されます。

list 属性に、サジェスト値あたり一つの <option> 要素を含んだ <datalist> の id を値として入れることにより、ユーザーの選択することができる既定の選択肢のリストを提供することができます。それぞれの option の value は、数値入力ボックスのサジェスト値に関係します。

<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
<span class="validity"></span>

<datalist id="defaultNumbers">
  <option value="10045678"></option>
  <option value="103421"></option>
  <option value="11111111"></option>
  <option value="12345678"></option>
  <option value="12999922"></option>
</datalist>

すでに number 入力欄における幾つかの検証機能については言及しましたが、ここで確認してみましょう。

• <input type="number"> 要素は、数値（または required が指定されていない場合は空欄）ではない入力を自動的に違反とします。
• required 属性を使用すると、空欄の入力を違反とします。 (つまり、入力欄は埋める必要があります。)
• step 属性を使用すると、妥当な値を特定の刻みの値 (例えば、10の倍数) に制約することができます。
• min および max 属性を使用すると、妥当な値の下限と上限を設けることができます。

次の例は上記の機能のすべてを例示しており、また幾らか CSS を用いて、 input の値によって、妥当または違反のアイコンを表示するようにします。

<form>
  <div>
    <label for="balloons">風船の注文数 (10の倍数):</label>
    <input
      id="balloons"
      type="number"
      name="balloons"
      step="10"
      min="0"
      max="100"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" />
  </div>
</form>

様々な違反する値を入力して、フォームを送信しようとしてみてください。例えば、値なし、 0 未満または 100 を超えた値、 10 の倍数ではない値、数値でない値などです。そして、それぞれにおいてブラウザーがどのようなエラーメッセージを表示するかを確認してください。

この例で適用される CSS は以下の通りです。

div {
  margin-bottom: 10px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

ここで、 :invalid および :valid 擬似クラスを用いて、隣の <span> 要素の生成コンテンツとして無効または妥当の適切なアイコンを表示し、妥当性の視覚的なインジケーターにすることができます。

別な <span> 要素に入れたのは自由度を高めるためです。ブラウザーによっては一部の種類のフォーム入力欄において、あまり効果的に生成コンテンツを表示できないことがあります（<input type="date"> の検証の節の例を読んでください）。

<input type="number"> 要素は pattern 属性を使用して、入力された値が特定の正規表現パタ ー ンを満たすようにすることに対応していません。

これは、 number 入力欄は数値以外の何が入力されても妥当にはならないからであり、上記で説明したとおり、 min および max 属性を用いて妥当な数値の最大値および最小値を制約することができます。

すでに既定では増分が 1 であるという事実を扱いましたので、 step 属性を使用して実数を入力できるようにすることができます。もう少し詳しく見てみましょう。

以下の例は、ユーザーの身長を入力するフォームです。既定では慎重をメートル単位で受け付けますが、関連するボタンをクリックすることでフォームがフィートとインチを受け付けるように変更することができます。メートル単位の身長の入力欄は小数第2位まで受け付けます。

HTML は次のようになります。

<form>
  <div class="metersInputGroup">
    <label for="meters">あなたの身長を入力してください (メートル):</label>
    <input
      id="meters"
      type="number"
      name="meters"
      step="0.01"
      min="0"
      placeholder="e.g. 1.78"
      required />
    <span class="validity"></span>
  </div>
  <div class="feetInputGroup" style="display: none;">
    <span>あなたの身長を入力してください — </span>
    <label for="feet">フィート:</label>
    <input id="feet" type="number" name="feet" min="0" step="1" />
    <span class="validity"></span>
    <label for="inches">インチ:</label>
    <input id="inches" type="number" name="inches" min="0" max="11" step="1" />
    <span class="validity"></span>
  </div>
  <div>
    <input
      type="button"
      class="meters"
      value="身長をフィートとインチで入力" />
  </div>
  <div>
    <input type="submit" value="フォームを送信" />
  </div>
</form>

これまでの記事ですでに見てきた属性の多くを使用していることがわかります。センチメートル単位のメートル値を受け入れるため、 step の値を 0.01 に設定して、 1.78 のような値が無効とされないようにしました。また、その入力欄のプレイスホルダーも提供しました。

最初はフィートとインチの入力欄を style="display: none;" を使用して非表示にしているため、既定はメートルでの入力です。

次に、 CSS に進みます。これは、以前に見た検証のスタイル付けととても良く似ています。ここで注目するところはありません。

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

そして最後に、 JavaScript です。

const metersInputGroup = document.querySelector('.metersInputGroup');
const feetInputGroup = document.querySelector('.feetInputGroup');
const metersInput = document.querySelector('#meters');
const feetInput = document.querySelector('#feet');
const inchesInput = document.querySelector('#inches');
const switchBtn = document.querySelector('input[type="button"]');

switchBtn.addEventListener('click', () => {
  if (switchBtn.getAttribute('class') === 'meters') {
    switchBtn.setAttribute('class', 'feet');
    switchBtn.value = '身長をメートルで入力';

    metersInputGroup.style.display = 'none';
    feetInputGroup.style.display = 'block';

    feetInput.setAttribute('required', '');
    inchesInput.setAttribute('required', '');
    metersInput.removeAttribute('required');

    metersInput.value = '';
  } else {
    switchBtn.setAttribute('class', 'meters');
    switchBtn.value = '身長をフィートとインチで入力';

    metersInputGroup.style.display = 'block';
    feetInputGroup.style.display = 'none';

    feetInput.removeAttribute('required');
    inchesInput.removeAttribute('required');
    metersInput.setAttribute('required', '');

    feetInput.value = '';
    inchesInput.value = '';
  }
});

いくつかの変数を宣言した後、イベントリスナーを button に追加し、切り替えの仕組みを制御しています。これはとても単純で、ほとんどがボタンの class と <label> を変更するためのものであり、そしてボタンが押されたときに2組の入力の display 値を更新しています。

(なお、ここではメートルとフィート/インチの間の変換は行っていませんが、実際のウェブアプリケーションではおそらく行うでしょう。)

<input type="number"> 要素の暗黙のロールは spinbutton (en-US) です。もしスピンボタンがフォームコントロールにとって重要な機能でないなら、 type="number" を使用しないよう検討してください。代わりに inputmode="numeric" を使用し、 pattern 属性で文字列を数字とそれに付随する文字に限定してください。 <input type="number"> では、ユーザーが何か他のことをしようとしているときに、誤って数値を増加してしまう危険性があります。さらに、ユーザーが数字でないものを入力しようとした場合、何が間違っているのか明示的なフィードバックがありません。

また、 autocomplete 属性を使用して、ユーザーがよりすばやく、エラーの可能性を低くしてフォームを記入できるようにすることも検討してください。例えば、郵便番号のフィールドで自動補完を有効にするには、 autocomplete="postal-code" と設定してください。

• HTML フォームガイド
• <input>
• <input type="tel">
• CSS プロパティの互換性
• Article: Why Gov.UK changed the input type for numbers