number入力は「数値だけを入れてもらうための“賢い入力欄”」
type="number" の入力欄は、 ユーザーに 「数字だけ」を入力してもらうための専用の入り口 です。
年齢 個数 価格 点数 割合
みたいな「数で表される値」を扱うときに使います。
見た目はテキスト入力に似ていますが、 ブラウザが「これは数値だ」と理解してくれることで、
数値以外の入力を軽くチェックしてくれる 上下の矢印（スピンボタン）で値を増減できる スマホで数字専用キーボードが出やすくなる
という“数値向けの便利さ”が手に入ります。
number入力の基本形と「textとの決定的な違い」
いちばんシンプルな書き方
<input type="number" name="age">
フォームに入れるとこうなります。
<form action="/profile" method="post">
<p>年齢：</p>
<input type="number" name="age">
<button type="submit">送信</button>
</form>
type="text" と違うのは、 「数字以外を入れようとするとブラウザが嫌がる」ことです。
例えば、 abc と入れようとしても、ブラウザによっては入力できなかったり、 送信時に「数値を入力してください」と警告されたりします。
number入力は「この欄は数字ですよ」とブラウザに宣言するもの。 text は何でも通すけれど、number は“数値以外”を嫌がる。
min・max・step：数値の範囲と刻みを決める
min と max で「許可する範囲」を決める
<input
type="number"
name="age"
min="0"
max="120"
>
この場合、
0 未満の値は入れられない、または送信時に警告 120 より大きい値も同様
という挙動になります。
年齢 点数（0〜100） 在庫数（0以上）
など、「この範囲に収まってほしい」数値には min と max を付けるのが基本です。
step で「増減の刻み」を決める
<input
type="number"
name="quantity"
min="1"
max="10"
step="1"
>
これは「1〜10 の整数」を扱う例です。
上下の矢印を押すと、 1 ずつ増えたり減ったりします。
小数を扱いたいときは、刻みを変えます。
<input
type="number"
name="rate"
min="0"
max="1"
step="0.1"
>
0.0 → 0.1 → 0.2 → … → 1.0 というように、0.1 ずつ増減します。
min・max・step は「この数値欄のルール」をブラウザに伝えるもの。 ユーザーにとっても、入力のガイドになります。
よくある number入力の使い方をフォームでイメージする
年齢入力欄
<form>
<p>年齢：</p>
<input
type="number"
name="age"
min="0"
max="120"
required
>
<button type="submit">送信</button>
</form>
ここでの役割は、
年齢なので「数値」であることが前提 0〜120 の範囲に収めたい 必須入力にしたい
という条件を、 type="number" + min + max + required で表現しています。
商品の個数入力欄
<form>
<p>購入個数：</p>
<input
type="number"
name="quantity"
min="1"
max="99"
step="1"
value="1"
>
<button type="submit">カートに追加</button>
</form>
ここでは、
最低 1 個 最大 99 個 整数のみ 初期値は 1
というルールを number入力で表現しています。
JavaScript と number入力：値は「文字列として来る」ことに注意
input.value は「文字列」、必要なら数値に変換する
HTML：
<input
type="number"
id="quantity"
name="quantity"
min="1"
max="10"
value="1"
>
<button type="button" id="calc">合計を計算</button>
<p id="result"></p>
JavaScript：
const input = document.querySelector("#quantity");
const button = document.querySelector("#calc");
const result = document.querySelector("#result");
button.addEventListener("click", () => {
const value = input.value; // ここでは文字列 "1" など
const num = Number(value); // 数値に変換する
if (Number.isNaN(num)) {
result.textContent = "数値を入力してください。";
return;
}
const price = 500;
const total = num * price;
result.textContent = `合計金額：${total}円`;
});
重要なのは、
input.value は「文字列」である 計算したいなら Number(value) や parseInt(value, 10) で数値に変換する
という 2 点です。
number入力だからといって、 JavaScript側でいきなり数値として扱えるわけではない。 “入力値はまず文字列として来る”という感覚を持っておくと、バグを減らせます。
HTML側のバリデーションと組み合わせる
required で「必須入力」にする
<input
type="number"
name="age"
required
>
空のまま送信しようとすると、 ブラウザが「数値を入力してください」と止めてくれます。
min・max・step と required をセットで使う
<input
type="number"
name="score"
min="0"
max="100"
step="1"
required
>
点数など、「必ず入れてほしい数値で、範囲も決まっている」ものは この組み合わせが定番です。
ブラウザが、
空かどうか 数値かどうか 範囲内かどうか
をある程度チェックしてくれます。
number入力を使うか迷ったときの判断基準
「ここは“数値だけ”を入れてもらう場所か？」
自分にこう聞いてみてください。
ここでユーザーに入力してもらいたいのは、 文字列ではなく「数」で表される値か？
YES → type="number" NO → type="text" や他の type
年齢 個数 点数 割合 重さ・長さ（単位は別途表示）
こういったものは、 number入力にするのが自然です。
逆に、 「数字も含むけど、実質は文字列（郵便番号をハイフン付きで入れるなど）」なら text入力の方が柔軟なこともあります。
初心者として「number入力」で絶対に掴んでほしいこと
type="number" の input は、 「数値だけを入れてもらうための、ルール付きの入力欄」 です。
ブラウザが「数値かどうか」「範囲に収まっているか」をある程度チェックしてくれる min・max・step で「この欄の数値ルール」を表現できる name が送信時のキー名になる JavaScriptでは input.value は文字列なので、計算するときは数値に変換する
あなたが number入力を書くときに、 「この欄は“数で表される値”を受け取る場所で、その範囲や刻みもちゃんと決めておきたい」 と意識できていたら、 もう number入力を“ただの数字欄”ではなく、 “ユーザーとアプリの間で数値を安全にやり取りするためのインターフェース”として扱えている状態です。