【HTML】input：type=numberで小数（小数点）の入力を可能にする方法

inputタグはフォーム入力で利用されるタグです。type属性によってフォーム上で入力できる型を指定できます。

type属性にnumberを指定すると、次図のような数値を入力させるフォームが表示されます。type=numberとすることで、アルファベットや日本語の入力は不可となり、数値しか入力できないフォームとなります。

数値といっても特別な属性を指定していない限りは整数のみしか入力できません。小数を入力するとエラーが表示する（無効な値としてみなされる）、またはフォームを送信しても小数のデータはサーバーに送られない問題が発生します。

inputタグのtype=numberで小数の入力を可能にするには、step属性を指定する必要があります。

step属性は数値を増減させる刻み量を設定できます。10刻みで数値を増減させたい場合はstep属性に「10」を指定します。

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

つまり小数を入力可能にするならば、step属性に小数を指定すればよいということです。

例えば小数点第一位までの小数であればstepに「0.1」を指定します。

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

小数点第二位までであれば「0.01」を指定する、といったように桁数を増やせば大丈夫です。

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

step属性を指定していない場合はstepに「1」が指定された状態となります。そのため通常は整数しか入力を許可されないのです。

また特別な指定値として「any」があります。「any」をstep属性に指定するとどの値でも許可するようになります。入力値が整数なのか小数かわからない場合はanyを指定するといいですね。

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

type=numberでstep属性を指定していないのに、小数を入力して送信した場合はサーバーに値が送信されません。

その他にinputタグにdisable属性を指定している場合でも数値がサーバーに送信されません。

【フォームform】inputタグの値が送信されない：disabled属性の特性について

このようにinputタグでは指定している属性などにより入力値がサーバーに送られない問題が発生しますので、注意して利用してください。

本記事「【HTML】input：type=numberで小数（小数点）の入力を可能にする方法」はいかがでしたか。

inputタグはWebアプリケーションでは必須のタグです。使い方の理解を深めて使いこなせるようになりましょう。