HTML attribute: step

any が明示的に設定されていない場合、 number, 日付/時刻入力型, range の入力型で有効な値は、刻みの基底値と等しくなります。 - min の値と、それに step の値を max の値 (指定されている場合) まで加えていった値です。例えば、 <input type="number" min="10" step="2"> は 10 以上の偶数が有効です。省略された場合、 <input type="number"> は任意の整数が有効ですが、 4.2 のような小数は無効になります。これは step の既定値が 1 だからです。 4.2 を有効にするには、 step を any、 0.1, 0.2 などに設定するか、 min の値の小数点以下を .2 に、たとえば <input type="number" min="-5.2"> のようにする必要があります。

min と step の値は、 step 属性がない場合も含め、どの値が有効であるかを定義します。 step の既定値は 0 です。

無効な入力の周囲に太く赤い境界を追加します。

input:invalid {
  border: solid red 3px;
}

それから入力欄の最小値を 7.2 と定義し、 step 属性は省略しているので、既定値が 1 になります。

<input id="myNumber" name="myNumber" type="number" step="2" min="1.2">

有効な値は、 1.2, 3.2, 5.2, 7.2, 9.2, 11.2 などになります。整数や .2 が付く偶数は無効です。無効な値である場合、対応しているブラウザーは値が無効であることを表示します。数値スピナーがある場合は、 1.2 以上の有効な浮動小数点以下の値のみ表示されます。

詳しくはクライアント側制約検証と stepMismatch を参照してください。

ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 min 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 <label> 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 aria-labelledby (en-US) または aria-describedby (en-US) を使用することを検討してください。

• max
• min
• 制約検証
• 制約検証 API
• validityState.stepMismatch
• :out-of-range
• <input>
• date, month, week, time, datetime-local, number, range 型と <meter>