HTMLのinput type="number"：ライブテスター
HTML input numberテスター
HTML input type=number：min、max、step、バリデーション | We.Inc
input type=numberをその場でテストできます。min、max、ステップを設定し、valueAsNumberとすべての有効性フラグを確認し、スピナーを消す方法と、inputmode=numericのほうが適した場面を学べます。
input type="number"は、年齢、価格、個数などの実際の数量に使います。minとmaxで許可する範囲を、stepで増分（デフォルトは1、自由な小数ならany）を設定し、valueAsNumberは数値を返し、欄が空ならNaNを返します。カード番号や郵便番号には、代わりにtype="text"とinputmode="numeric"を使いましょう。
数値入力欄の属性
- min="0"
- それより小さい値はバリデーションに失敗します（rangeUnderflow）
- max="10"
- それより大きい値はバリデーションに失敗します（rangeOverflow）
- step="0.01" or step="any"
- デフォルトは1。ステップに合わない値は失敗します（stepMismatch）
- list="sizes"
- datalistから値を候補として表示します
- placeholder="e.g. 2"
- 空の間に表示されるヒントで、ラベルの代わりにはなりません
数値入力欄はシンプルに見えますが、ステップ、空の値、スピナーに関するルールでつまずきがちです。テスターで属性を設定し、入力欄に何でも入力すると、生の値、解析された数値、各有効性フラグが入力に合わせて更新されます。
- 最小値、最大値、ステップの値を入力します。属性を外したい場合は欄を空にします。
- テスト用の入力欄に入力するか、矢印キーやスピナーを使います。
- 横のパネルでvalue、valueAsNumber、有効性フラグを確認します。
- 入力欄が思いどおりに動いたら、生成されたHTMLをコピーします。
- 入力欄には必ず目に見えるラベル要素を組み合わせましょう。プレースホルダーは入力を始めたとたんに消えます。
- valueを自分で解析するのではなくvalueAsNumberを読み取り、使う前にNaNでないか確認しましょう。
- サーバー側でも再度バリデーションしましょう。ブラウザーのチェックは利用者の助けになりますが、誰でもそれを回避してフォームを送信できます。
- 金額にはstep="0.01"で1セント単位を受け付け、自由な小数にはstep="any"を使いましょう。
- 電話番号、カード番号、郵便番号など、スピナーが意味をなさない欄にはtype="number"を使わないでください。
よくある質問
数値入力欄が1.5を受け付けないのはなぜですか？
デフォルトのステップは1なので、ステップの基準が整数でない場合を除き、整数だけが有効です。小数を受け付けるには、step="0.5"、step="0.01"、step="any"のいずれかを追加します。
空の欄に対してvalueAsNumberは何を返しますか？
NaNです。同じ場合、値のプロパティは空文字列を返します。valueAsNumberに値を設定して、欄に数値を書き戻すこともできます。
数値入力欄の矢印を消すには？
入力欄にappearance: textfieldを設定します。appearanceは見た目を変えるだけなので、上下の矢印キーでは引き続き値が変わります。WebKitとBlinkは疑似要素でもスピンボタンを描画するので、下の例ではそれも非表示にしています。
type=numberとinputmode=numericのどちらを使うべきですか？
値が実際の数量で、スピナーが役立つ場合はtype="number"を使います。カード番号や郵便番号のような数字の文字列は、量ではなく識別子なので、type="text"にinputmode="numeric"とパターンを組み合わせて使います。
空の数値入力欄は有効ですか？
必須属性（required）がなければ有効です。数値入力欄は、空であるか、有効な数値を1つ含んでいれば有効とみなされます。
バリデーションの仕組み
- ブラウザーは入力欄を最小値、最大値、ステップと照らし合わせ、違反したルールごとに有効性オブジェクトのフラグを立てます。フラグが立っている間はフォームが送信されず、:invalidで入力欄にスタイルを付けられます。
- ブラウザーが数値に変換できないテキストが入っていると、validity.badInputがtrueになります。読み取った値を信用する前に、このフラグか、valueAsNumberがNaNかどうかを確認しましょう。テスターには、ブラウザーが報告する内容がそのまま表示されます。
アクセシビリティとモバイル
- 数値入力欄は、支援技術にはスピンボタンとして伝えられます。値を上下に増減させることに意味がない場合は、inputmode="numeric"付きのテキスト欄にすると、スクロールホイールや矢印キーによる意図しない変更を防げます。
- その値が足したり引いたりできる量かどうかを考えましょう。量なら数値入力欄を、たまたま数字を含むコードならテキスト欄を使います。
どの数値にどの入力欄を使うか
type=numberと数字用テキスト欄の比較
- 数量、年齢、人数
- type="number" min max
- 実際の量なので、スピナーと範囲チェックが役立つ
- 価格
- type="number" step="0.01"
- セント単位には小数のステップが必要
- カード番号
- type="text" inputmode="numeric"
- 量ではなく識別子
- 郵便番号
- type="text" inputmode="numeric"
- 国によっては先頭のゼロや文字を含む
- ワンタイムコード
- type="text" inputmode="numeric" autocomplete="one-time-code"
- 数字のみで、スピナーは不要
- 電話番号
- type="tel"
- 専用のinput typeがある
数値入力欄の例
小数のステップと無効時のスタイルを持つ価格欄
4.999や負の数を入力すると、値がステップか最小値に違反するため、枠線が赤くなります。
スピンボタンを非表示にする
appearance: textfieldで矢印が消え、WebKitの疑似要素の指定で、まだ矢印を描画するブラウザーにも対応します。矢印キーは引き続き使えます。
スピナーのない数字専用の入力欄
inputmodeで数字キーボードを促し、パターンで5桁かを確認し、先頭のゼロもそのまま残ります。
JavaScriptで数値を安全に読み取る
valueAsNumberで文字列の解析を避け、有効性のチェックで範囲外やステップに合わない値を検出します。
数値入力テスター
テスト用の入力欄
ブラウザーが報告する内容
（空文字列）
有効
無効
ブラウザーのメッセージ
HTMLをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る