number

input要素のtype属性にnumberを指定すると、数値入力欄になる。

ブラウザ対応

構文

<input type="number">

属性

属性 説明
autocomplete属性 オートコンプリートを有効にするかどうかを指定する属性。
autofocus属性 オートフォーカスさせる属性。
disabled属性 無効にする属性。
form属性 属するform要素のid属性値を指定する属性。
list属性 入力候補を示すdatalist要素（データリスト）のid属性値を指定する属性。
max属性 最大値を指定する属性。数値入力欄においては、max属性に指定した数値より大きい数値は入力できなくなる。
min属性 最小値を指定する属性。数値入力欄においては、min属性に指定した数値より小さい数値は入力できなくなる。
name属性 名前を指定する属性。
placeholder属性 入力のヒントとなるプレースホルダーを指定する属性。
readonly属性 読み取り専用にする属性。
required属性 入力を必須にする属性。
step属性 入力可能な数値の間隔を指定する属性。数値入力欄においては、入力可能な数値の間隔となる。数値入力欄における初期設定値は1。
value属性 値を指定する属性。数値入力欄においては、初期入力値となる。

サンプルコード

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

最大値と最小値を指定

<input type="number" min="-10" max="10" name="sampleName">

入力可能な数値の間隔を指定

<input type="number" step="5" name="sampleName">

初期入力値を指定

<input type="number" value="5" name="sampleName">

サンプル

シンプルな数値入力フォーム

HTMLソースコード
<form action="sample-input-type.php" method="post" target="_blank">
	<p>
		<label>
			数値入力欄：
			<input type="number" name="sampleName">
		</label>
	</p>
	<p>
		<input type="submit">
	</p>
</form>
実際の表示

特定範囲の数値入力

HTMLソースコード
<form action="sample-input-type.php" method="post" target="_blank">
	<p>
		<label>
			数値入力欄：
			<input type="number" name="sampleName" value="0" min="-10" max="10">
		</label>
	</p>
	<p>
		<input type="submit">
	</p>
</form>
実際の表示

特定の間隔の数値入力欄

HTMLソースコード
<form action="sample-input-type.php" method="post" target="_blank">
	<p>
		<label>
			数値入力欄：
			<input type="number" name="sampleName" value="50" step="5">
		</label>
	</p>
	<p>
		<input type="submit">
	</p>
</form>
実際の表示