HTML 少数入力時に「有効な値を入力してください」と出たときの話

目次

• input要素などで数値入力を行う際に少数の入力で「有効な値を入力してください。」と出てしまったときに少数の入力を可能にする方法をまとめる。

結論

• input要素にてstepを指定する。

書き方の例

• 問題箇所のinput要素を下記に記載する。

  <input type="number" name="study_time">
  

• 小数点第一位までの入力に対応されたい場合は下記のようにstepを登録する。

  <input type="number" step="0.1" name="study_time">
  

• 少数点第二位までの入力に対応させたい場合は下記のようにstepを登録する。

  <input type="number" step="0.01" name="study_time">
  

• 100の位以下の入力を行わせたくない場合は下記のようにstepを登録する。

  <input type="number" step="100" name="study_time">