小数点ありの数字のみを入力させるタグ

ウェブの入力で、数値入力のみをさせるタグ。html5以降で、inputタグのタイプをnumberにすることで、数値入力専用になる。オプションの”step”で指定することにより、入力できる最小単位を決められるので、stepで少数を指定することで、入力を少数でできる。

<input type="number" step="0.5" max="24" min="0"  value="0" class="chara4">

解説

  • stepで、「0.5」を指定し、0.5単位の入力に限定している。(0.5, 1, 1.5, 2 のように0.5刻みで入力される)
  • maxで、最大の数をしている。ここでは最大で24まで。
  • minで、最小の数をしている。0を指定しない場合は、マイナスの数値も入力できる。
  • valueで、初期を指定。

入力の枠の幅を”size”では指定できないので、CSSで指定した。下記では、4文字分の幅にしている。

input[type="number"].chara4 { 
    width: 4em; 
}
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする