<input type="number">

<input> 要素の number 型は、ユーザーに数値を入力させるために使用されます。数値以外の入力を除外するための値検証機能を内蔵しています。ブラウザーによっては、マウスや指先のタップを使用して値をユーザーが値を増減させるための矢印を提供していることもあります。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

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

値

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

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

追加の属性

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

max

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

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

min

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

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

placeholder

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

コントロールの内容が単一の書字方向 (LTR または RTL) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。これらの文字については、Unicode 制御文字を使用した書字方向の上書き in [Page not yet written]を参照してください。

readonly

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

step

number 入力欄の既定の刻み値は1であり、刻みの基準値が整数ではない場合を除いて、整数の入力のみを許可します。例えば、 min に -10 を、 value に 1.5 を設定した場合、 step が 1 の場合は正の方向に 1.5, 2.5, 3.5,... など、負の方向に -0.5, -1.5, -2.5,... などのみが許可されます。

number 入力欄の使用

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

モバイルブラウザーでは、ユーザーが値を入力しようとした時に、数値入力に適した特別なキーボードを表示することで、使い勝手をさらに向上させます。次のスクリーンショットは、 Android の Firefox で撮影されたものです。

単純な数値入力

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

<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="multiple of 10" step="10">

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

最小値と最大値の指定

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

<input type="number" placeholder="multiple of 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" は有効になりません。

入力欄の寸法の制御

number 型の <input> 要素では、 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 value="103421">
  <option value="11111111">
  <option value="12345678">
  <option value="12999922">
</datalist>

検証

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

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

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

<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 属性を用いて妥当な数値の最大値および最小値を制約することができます。

例

We've already covered the fact that by default, the increment is 1, and you can use the step attribute to allow decimal inputs. Let's take a closer look. In the following example we've set up a form for entering the user's height; it defaults to accepting a height in meters, but you can click the relevant button to change the form to accept feet and inches instead. The input for the height in meters accepts decimals to two places.

The HTML looks like this:

<form>
    <div class="metersInputGroup">
        <label for="meters">Enter your height — 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>Enter your height — </span>
        <label for="feet">feet:</label>
        <input id="feet" type="number" name="feet" min="0" step="1">
        <span class="validity"></span>
        <label for="inches">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="Enter height in feet and inches">
    </div>
    <div>
        <input type="submit" value="Submit form">
    </div>
</form>

You'll see that we are using many of the attributes we've already looked at in the article earlier on. Since we want to accept a meter value in centimeters, we've set the step value to 0.01, so that values like 1.78 are not seen as invalid. We've also provided a placeholder for that input.

We've hidden the feet and inches inputs initially using style="display: none;" so that meters is the default entry type.

Now on to the CSS — this looks very similar to the validation styling we saw before; nothing remarkable here:

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;
}

And finally, the JavaScript:

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

switchBtn.addEventListener('click', function() {
  if(switchBtn.getAttribute('class') === 'meters') {
    switchBtn.setAttribute('class', 'feet');
    switchBtn.value = 'Enter height in meters';

    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 = 'Enter height in feet and inches';

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

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

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

After declaring a few variables, we add an event listener to the button to control the switching mechanism. This is pretty simple, mostly involving changing over the button class and label, and updating the display values of the two sets of inputs when the button is pressed. Note that we're not converting back and forth between meters and feet/inches here, which a real-life web application would probably do.

仕様書

ブラウザーの対応

関連情報

• HTML フォームガイド
• <input>
• <input type="tel">