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

2023.05.27 / 2023.05.27

本記事ではHTMLのinputタグにおける、type=numberで小数（小数点）の入力を可能にする方法について解説していきます。

inputタグでtype属性にnumberを指定するとユーザーは数値を入力できます。ここでinputタグに特別な属性を指定していなければ、このフォームで入力できる数値は整数のみです。

本記事を通して、inputタグで小数（小数点）の入力について理解を深めてください。

inputタグについて

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属性を指定している場合でも数値がサーバーに送信されません。

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

inputタグの入力値がサーバーに送信されない例

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

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