HTML5に浮動小数点入力タイプはありますか？

html5.orgによると、「数値」入力タイプの「値属性は、指定されて空でない場合、有効な浮動小数点数である値を持つ必要があります。」

しかし、それは単に（とにかく最新バージョンのChromeでは）、浮動小数点数ではなく整数を使用する「アップダウン」コントロールです。

<input type="number" id="totalAmt"></input>

HTML5にネイティブの浮動小数点入力要素、または数値入力タイプを整数ではなく浮動小数点で動作させる方法はありますか？または、jQuery UIプラグインを使用する必要がありますか？

number型が有するstep（と共に有効である数値制御値maxとmin）、デフォルトは1。この値は、ステッパーボタンの実装でも使用されます（つまり、を押すと増加しますstep）。

この値を適切な値に変更するだけです。お金のために、おそらく小数点以下2桁が予想されます：

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

（min=0それが肯定的である場合のみ設定します）

小数点以下の桁数を許可したい場合は使用できますstep="any"（ただし、通貨の場合はに固執することをお勧めします0.01）。ChromeとFirefoxでは、使用時にステッパーボタンが1ずつ増減します。anyます。（指摘してミハルStefanowの答えのおかげでany、そしてここでは関係の仕様を参照してください）

以下は、さまざまなステップがさまざまな入力タイプにどのように影響するかを示す遊び場です。

<form>
  <input type=number step=1 /> Step 1 (default)<br />
  <input type=number step=0.01 /> Step 0.01<br />
  <input type=number step=any /> Step any<br />
  <input type=range step=20 /> Step 20<br />
  <input type=datetime-local step=60 /> Step 60 (default)<br />
  <input type=datetime-local step=1 /> Step 1<br />
  <input type=datetime-local step=any /> Step any<br />
  <input type=datetime-local step=0.001 /> Step 0.001<br />
  <input type=datetime-local step=3600 /> Step 3600 (1 hour)<br />
  <input type=datetime-local step=86400 /> Step 86400 (1 day)<br />
  <input type=datetime-local step=70 /> Step 70 (1 min, 10 sec)<br />
</form>

いつものように、簡単なメモを追加します。クライアント側の検証はユーザーの便宜にすぎないことを忘れないでください。サーバー側でも検証する必要があります！

経由：http : //blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

しかし、整数と小数を問わず、すべての数値を有効にしたい場合はどうでしょうか。この場合、stepを「any」に設定します

<input type="number" step="any" />

Chromeで動作しますが、他のブラウザではテストされていません。

以下を使用できます。

<input type="number" step="any" min="0" max="100" value="22.33">

入力タイプ番号にstep属性を使用できます。

<input type="number" id="totalAmt" step="0.1"></input>

step="any"小数を許可します。
step="1"小数は許可されません。
step="0.5"0.5を許可します。1; 1.5; ...
step="0.1"0.1を許可します。0.2; 0.3; 0.4; ...

この答えに基づいて

<input type="text" id="sno" placeholder="Only float with dot !"   
   onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
   event.charCode == 46 || event.charCode == 0 ">

意味：

文字コード：

• 48〜57 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
• 0はBackspace（そうでなければFirefoxの更新ページが必要です）
• 46は dot

&&is AND、||is OR演算子です。

コンマで浮動小数点を試してみると：

<input type="text" id="sno" placeholder="Only float with comma !"   
     onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
     event.charCode == 44 || event.charCode == 0 ">

サポートされているChromiumおよびFirefox（Linux X64）（私が存在しない他のブラウザー）

そうする

 <input id="relacionac" name="relacionac" type="number" min="0.4" max="0.7" placeholder="0,40-0,70" class="form-control input-md" step="0.01">

次に、ステップ0.01で最小値を0.4で定義し、最大値を0.7で定義します：0.4、0.41、0、42 ... 0.7

私は同じ問題を抱えていましたが、フランス語のローカリゼーションのため、数字にピリオド / フルストップではなくカンマを入れるだけで修正できました。

だからそれはで動作します：

2はOKです

2,5はOKです

2.5はKOです（数値は「不正」と見なされ、空の値を受け取ります）。