<input type="number">

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素リスト化サブミット可能リセット可能自動大文字化と自動修正継承ラベル付け可能) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 無し(空要素)

input要素type="number" を指定すると、数値の入力欄を作成できます。


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

<input type="number" name="example2" value="7">

属性
任意属性(共通)
type="" 部品のタイプ number 数値の入力欄
name="" 部品の名前 文字列 部品を識別するための名前
value="" 送信される値 数値 入力欄の初期値(浮動小数点数)
disabled 部品の無効化 disabled 値は省略可能
form="" フォームとの関連付け ID名 関連付けるform要素に指定したID名
任意属性(部品タイプに依存)
min="" 入力できる数値の最小値 数値 最小値(浮動小数点数)
max="" 入力できる数値の最大値 数値 最大値(浮動小数点数)
step="" 入力できる数値のステップ 数値 この値の間隔で入力を可能にする(既定値は 1
any ステップを設定しない
autocomplete="" オートコンプリート on オートコンプリートを有効にする
off オートコンプリートを無効にする
詳細トークン (詳しくは仕様書をご覧ください)
list="" 入力候補のリスト ID名 関連付けるdatalist要素に指定したID名
placeholder="" 入力のヒント 文字列 記入例、フォーマットの例
readonly 読み取り専用 readonly 値は省略可能
required 入力必須 required 値は省略可能
  • 各属性の概要は、上記表のリンク先をご覧ください。(input要素のページにリンクしています)

どの部品タイプにどの属性を指定できるかは、下記の対応表で確認することができます。

この部品タイプの特徴

数値を入力するための入力欄です。

(実際の表示例)

この部品タイプに対応しているブラウザでは、スピナー(上下ボタン)を使って数値を入力することができます。

  • このタイプの入力欄は、数量等の入力を想定したものになります。カード番号等の入力には type="text" を使うのが適切です。

数値の書式

入力する数値、およびvalue属性min属性max属性の値は、次の書式で記述する必要があります。

浮動小数点数
7-70.70.7E-2
  • 負数の数値も入力することができます。(マイナス( - )を付けます)
  • 小数点以下の数値も入力することができます。(ピリオド( . )に続けて記述します)
  • 指数表記も使えます。(E または e を付けます)
<input type="number" name="example" value="-7">

小数点以下の入力を求める場合は、step属性の値に 0.1 などを指定しておきます。(既定値が 1 なので)

<input type="number" name="example" step="0.1" value="7.7">

min属性とmax属性について

min属性max属性は、入力できる数値の範囲を指定します。(どちらかのみを指定することも可能です)

  • min属性 … 入力できる数値の最小値を指定します。
  • max属性 … 入力できる数値の最大値を指定します。

次の例では、-55 の範囲で入力が可能となります。

<input type="number" name="example" min="-5" max="5">

step属性について

step属性は、入力できる数値のステップ(入力値の間隔)を指定します。type="number" の場合は 1 が既定値となります。

次の例では 10 を指定しているので、10間隔で入力できることになります。(例:10、20、30 ...)

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

小数点以下の入力を可能にする場合は、次のように 0.1 などを指定します。

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

値に any を指定すると、ステップは設定されません。

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

使用例

min属性とmax属性を指定した例

<p><input type="number" name="example" min="-5" max="5" value="0"></p>

表示例

  • 対応しているブラウザでは、-55 の範囲しか選択できなくなります。
step属性を指定した例

<p>デフォルト(1):<input type="number" name="example1"></p>

<p>0.1を指定:<input type="number" name="example2" step="0.1"></p>

<p>10を指定:<input type="number" name="example3" step="10"></p>


表示例

デフォルト(1):

0.1を指定:

10を指定:

  • 数値のスピナーを操作すると、指定した間隔で数値が変化します(対応しているブラウザのみ)。
required属性を指定した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。

<form method="get" action="input_number.html">

<p><input type="number" name="example" required> <strong>必須</strong></p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

必須

  • 対応しているブラウザでは、送信時に入力内容の妥当性がチェックされ、不備があればエラーメッセージが表示されます。