<input> 要素のnumber 型は、ユーザーに数値を入力させるために使用されます。数値以外の入力を除外するための値検証機能を内蔵しています。

ブラウザーによっては、マウスや指先のタップを使用して、値をユーザーが値を増減させるための矢印を提供していることもあります。

試してみましょう

<label for="tentacles">Number of tentacles (10-100):</label><input type="number" name="tentacles" min="10" max="100" />

label {  display: block;  font:    1rem "Fira Sans",    sans-serif;}input,label {  margin: 0.4rem 0;}

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

値

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

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

追加の属性

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

list

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

max

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

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

min

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

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

placeholder

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

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

readonly

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

step

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

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

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

number 入力欄の使用

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 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.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" は妥当ではありません。

任意の小数値を許可したい場合は、step の値を"any" に設定してください。

入力欄の寸法の制御

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

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

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

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

#number {  width: 3em;}

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

サジェスト値の提供

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

<input type="number" name="ticketNum" list="defaultNumbers" /><span></span><datalist>  <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           type="number"      name="balloons"      step="10"      min="0"      max="100"      required />    <span></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 属性を用いて妥当な数値の最大値および最小値を制約することができます。

アクセシビリティの考慮

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

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

例

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

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

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

<form>  <div>    <label for="meters">あなたの身長を入力してください (メートル):</label>    <input           type="number"      name="meters"      step="0.01"      min="0"      placeholder="e.g. 1.78"      required />    <span></span>  </div>  <div>    <span>あなたの身長を入力してください — </span>    <label for="feet">フィート:</label>    <input type="number" name="feet" min="0" step="1" />    <span></span>    <label for="inches">インチ:</label>    <input type="number" name="inches" min="0" max="11" step="1" />    <span></span>  </div>  <div>    <input type="button" 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 値を更新しています。

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

技術的概要

仕様書

ブラウザーの互換性

関連情報

• HTML フォームガイド
• <input>
• <input type="tel">
• Article: Why Gov.UK changed the input type for numbers