<input type="number">

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

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

入力欄に入力された数字の値を表す Number です。 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 制御文字を使用した書字方向の上書き in [Page not yet written]を参照してください。

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

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

<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 を用いて、 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="例 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 です。

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

switchBtn.addEventListener('click', function() {
  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">
• CSS プロパティの互換性