この翻訳は不完全です。英語から この記事を翻訳 してください。

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

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

数字を表す Number、または空欄
イベント change および input
対応している共通属性 autocomplete, list, placeholder, readonly
IDL 属性 list, value, valueAsNumber
メソッド select(), stepUp(), stepDown()

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

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

追加の属性

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

属性 説明
max この入力欄で受け付ける最大値
min この入力欄で受け付ける最小値
placeholder 入力欄の中が空の時に表示される入力例の値
readonly 論理値で、値が読み取り専用であるかどうかの制御
step 上下の矢印で値を調整する時や、検証に使用する刻み値

max

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

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

min

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

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

placeholder

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

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

メモ: 可能であれば placeholder を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、Labels and placeholders in <input>: 入力欄 (フォーム入力) 要素を参照してください。

readonly

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

メモ: 読み取り専用フィールドは値を持てないため、 requiredreadonly 属性も指定されている入力欄には効果がありません。

step

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

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

メモ: ユーザーがデータを入力したときには刻みの設定には吸着せず、ユーザーエージェントは直近の妥当な値、同じ距離の値の選択肢が二つあった場合は、正の方向の推奨値に丸められます。

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つずつ上下するための上下ボタンの組み合わせが表示されます。

重要: 論理的には、数値入力欄の中に数字以外を入力することはできないはずです。これらは、ブラウザー間でこれに関するいくつかの意見の相違があるようです。 バグ 1398528 を参照してください。

メモ: ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用してはいけません。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う必要があります

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

単純な数値入力

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

<label for="ticketNum">購入するチケットの枚数:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0">

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

メモ: 有効な浮動小数点数を受け入れることができます (つまり、 NaN でも Infinity でもないもの)。

プレイスホルダー

フォームがどのような入力データを取るのかについての行内のヒントを提供すると、有益なことがあります。これはページのデザインでそれぞれの <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 を値として入れることにより、ユーザーの選択することができる既定の選択肢のリストを提供することができます。それぞれの optionvalue は、数値入力ボックスのサジェスト値に関係します。

<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 入力欄での list 属性の使用はすべてのブラウザーで対応しているわけではありません。例えば Chrome や Opera では動作しますが、 Firefox では動作しません。

検証

すでに 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"> の検証の節の例を読んでください)。

重要: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML をバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。

パターンによる値検証

<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.

Note that when the user clicks the button, we remove the required attribute(s) from the input(s) we are hiding, and empty the value attribute(s). This is so that we can submit the form if both input sets aren't filled in, and won't submit data that we didn't mean to submit. If we didn't do this, you'd have to fill in both feet/inches and meters to submit the form!

仕様書

仕様書 状態 備考
HTML Living Standard
<input type="number"> の定義
現行の標準 初回定義
HTML 5.1
<input type="number"> の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
type="number"Chrome 完全対応 ありEdge ? Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09, 8845musign
最終更新者: mdnwebdocs-bot,