input type="number"

提供: ASCII.jp HTMLリファレンス

ver.未対応~ ver.未対応~ ver.14~ ver.5.1~ ver.11.5~
意味 数値の入力
読み方 インプット

カテゴリー

フロー・コンテンツ
フレージング・コンテンツ
インタラクティブ・コンテンツ
リスト化/ラベル付け可能/送信可能/リセット可能なフォーム関連要素

親にできる要素/カテゴリー

フレージング・コンテンツが期待される場所

子にできる要素/カテゴリー

<input 属性="値">

属性 概要
name 文字列 フィールドの名前
value 文字列 送信する値
autocomplete 「on」または「off」 オートコンプリート機能のオン/オフ
list 文字列 datalist要素のID
max 数値 入力可能な数値の最大値
min 数値 入力可能な数値の最小値
readonly 論理値 読み込み専用にするかどうか
required 論理値 入力必須にするかどうか
step 数値 ステップ値

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 type属性の値が「number」のinput要素は、数値とみなせる文字列を入力するための要素になります。

 ただし、Internet Explorer 8/9とFirefox 7では、type="number"の機能は実装されておらず、1行入力と同じ動作になります。

 Google Chrome 14、Safari 5.1、Opera 11.5は標準で、入力欄の右端にスピナーが表示され、数値の増減ができます。

入力値の制限

 min・max属性は、入力できる値の下限・上限を指定します(min以上max以下)。いずれの値も、浮動小数点数値として有効な形式の文字列を指定します。min・maxの片方だけの指定もできます。

 step属性では、入力できる値のステップを指定します。step属性の標準値は1です。

 Google Chrome 14とOpera 11.5では、min、max、stepの条件に合わない数値を送信すると、エラーメッセージが表示されます。

 Safari 5.1では、数値だけしか入力できませんが、min、max、stepの条件に合わない数値でも送信できます。Internet Explorer 8/9とFirefox 7では、min、max、step属性の機能は実装されていません。

その他の属性

 autocomplete、list、readonly、required属性の使い方は、input 1行入力系と同じです。

サンプル

(body要素の内部のみ掲載)

<form action="server.php" method="post">
<p><label>number:<input type="number" name="num" min="0" max="100" step="2"></label></p>
<p><input type="submit" value="送信"></p>

 min、max、step属性を使って、0~100の偶数を入力できるようにしています。

サンプル実行画像

 Internet Explorer 9での表示例です。type="number"の処理が実装されていないので、1行入力欄が表示されます。

Google Chrome 14でフォームを開いて、数値を入力した例です。スピナーで数値の増減ができます。

Powered by Web Professional

目次