<input type="number">
<input>
要素の number
型は、ユーザーに数値を入力させるために使用されます。数値以外の入力を除外するための値検証機能を内蔵しています。
ブラウザーによっては、マウスや指先のタップを使用して、値をユーザーが値を増減させるための矢印を提供していることもあります。
試してみましょう
number
型に対応していないブラウザーでは、 number
入力欄は text
入力欄で代替されます。
値 | 数字を表す Number 、または空欄 |
イベント |
change および
input
|
対応している共通属性 |
autocomplete ,
list ,
placeholder ,
readonly
|
IDL 属性 | list , value , valueAsNumber |
メソッド |
select() ,
stepUp() ,
stepDown()
|
値
入力欄に入力された数字の値を表す数値です。 value
属性に数値を設定することで、次のように入力欄の既定値を設定することができます。
<input id="number" type="number" value="42">
追加の属性
すべての <input>
型で共通する属性に加え、 number
型の入力欄は次の属性にも対応しています。
list
list 属性の値は、同じ文書内にある <datalist>
要素の id
です。 <datalist>
は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち、この type
と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。
max
min
placeholder
placeholder
属性は文字列で、その欄にどのような種類の情報が期待されているかについてのユーザーに対する短いヒントを提供します。これは期待されているデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることはできません。
コントロールの内容がある書字方向 (LTR または RTL) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。詳しくは、双方向テキストでの Unicode コードの使い方(英語)を参照してください。
Note: 可能であれば placeholder
を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、<input>: 入力欄 (フォーム入力) 要素のプレイスホルダーはアクセシブルではないを参照してください。
readonly
論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 value
は、 JavaScript コードから直接 HTMLInputElement
の value
プロパティを設定することで変更することができます。
Note: 読み取り専用フィールドは値を持てないため、 required
は readonly
属性も指定されている入力欄には効果がありません。
step
step
属性は値が吸着する粒度を指定する数値、または後述する特殊な値 any
です。刻みの基準値に等しい値(指定されていれば min
、そうでなければ value
、どちらも設定されていなければ適切な既定値)のみが妥当となります。
文字列値の any
は、刻みがなく、どの値でも許可されることを意味します(min
や max
など、他の制約には制限されます)。
Note: ユーザーがデータを入力したときには刻みの設定には吸着せず、ユーザーエージェントは直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。
number
入力欄の既定の刻み値は 1
であり、刻みの基準値が整数ではない場合を除いて、整数の入力のみを許可します。
number 入力欄の使用
<input type="number">
要素は、フォームに数値を入力するユーザーインターフェイスとロジックを構築する際に、作業を簡略化するのに役立ちます。 type
の値に正しく number
を設定して数値入力を作成すると、入力された文字列が数値かどうかが自動的に検証されるようになり、通常は値を 1 つずつ上下するための上下ボタンの組み合わせが表示されます。
Warning: 論理的には、数値入力欄の中に数字以外を入力することはできないはずです。これらは、ブラウザー間でこれに関するいくつかの意見の相違があるようです。 バグ 1398528 を参照してください。
Note: ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用してはいけません。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う必要があります。
モバイルブラウザーでは、ユーザーが値を入力しようとした時に、数値入力に適した特別なキーボードを表示することで、使い勝手をさらに向上させます。
単純な数値入力
最も基本的なフォームでは、次のように数値入力を実装することができます。
<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 の倍数ではない数値を入力することができますが、無効な値とみなされるでしょう。
最小値と最大値の指定
小数が使用できるようにする
数値入力の問題の一つが、既定で刻みが 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 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">
の検証の節の例を読んでください)。
Warning: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用にはなりません。
誰かが HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML をバイパスし、サーバーに直接データを送信することも可能です。
サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ(または大きすぎるデータ、間違った種類のデータなど)がデータベースに入力された場合に災害が発生するおそれがあります。
パターンによる値検証
例
すでに既定では増分が 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 です。
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 値を更新しています。
(なお、ここではメートルとフィート/インチの間の変換は行っていませんが、実際のウェブアプリケーションではおそらく行うでしょう。)
Note: ユーザーがボタンをクリックしたとき、 required
属性を非表示にする入力欄から削除し、 value
属性を空にしています。これは入力欄の両方の組が入力されていなくてもフォームを送信することができるようにしています。これはユーザーが意図していないデータをフォームが送信しないことを保証するものでもあります。
これを行わないと、フィート/インチとメートルの両方を入力してフォームを送信することができてしまいます。
仕様書
No specification found
No specification data found for html.elements.input.input-number
.
Check for problems with this page or contribute a missing spec_url
to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.
ブラウザーの互換性
No compatibility data found for html.elements.input.input-number
.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.