概要

数値入力フォームを設計するとき、ユーザーに自由に何でも入力させてしまうのは非効率で危険だ。
そこで活躍するのが、<input type="number"> による入力制御。

min / max / step 属性を正しく指定すれば、ユーザーが無効な値を入力するリスクを低減できる。

対象環境

HTML5以降対応ブラウザ（Chrome / Firefox / Edge / Safari）

<input type="number" min="0" max="100" step="10">

この入力フィールドでは：

<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。

<input type="number" min="1" max="99" step="1" required>

<input type="number"> の真価は、属性でロジックを宣言的に表現できる点にある。
JavaScriptに頼らず、HTMLだけで安全で使いやすいUIを提供できるのは強力だ。

バリデーションはフロントエンドの第一防衛線。
その守備をHTMLでしっかり固めておこう。