概要
数値入力フォームを設計するとき、ユーザーに自由に何でも入力させてしまうのは非効率で危険だ。
そこで活躍するのが、<input type="number"> による入力制御。
min / max / step 属性を正しく指定すれば、ユーザーが無効な値を入力するリスクを低減できる。
対象環境
HTML5以降対応ブラウザ（Chrome / Firefox / Edge / Safari）
基本構文
<input type="number" min="0" max="100" step="10">
この入力フィールドでは：
- 0〜100 の間のみ有効
- 10単位で増減（0, 10, 20, ..., 100）
- マウスホイール・↑↓キー・手動入力すべてに適用
使用例：年齢入力欄
<input type="number" name="age" min="0" max="130" step="1" placeholder="年齢を入力">
使用例：数量入力（偶数のみ）
<input type="number" min="2" max="10" step="2">
この場合、有効値は 2, 4, 6, 8, 10。
UXの改善：requiredと組み合わせる
<input type="number" min="1" max="99" step="1" required>
- 空欄のまま送信しようとすると警告
- 数値が範囲外ならバリデーションエラーになる
結語
<input type="number"> の真価は、属性でロジックを宣言的に表現できる点にある。
JavaScriptに頼らず、HTMLだけで安全で使いやすいUIを提供できるのは強力だ。
バリデーションはフロントエンドの第一防衛線。
その守備をHTMLでしっかり固めておこう。