備忘録的プログラミングリファレンス

<input type="number">

 <input type="number">は、数値に限定した入力ができる input のタイプです。FORM エレメント使用してサーバーにデータが送信できます。
 最大値と最小値が設定できます。

<input type="number">
<label>数値<input type="number" value="" /></label>
	
表示例

 <label> エレメントによって項目名や説明を付けることができます。

 CSS、スタイルシートを利用して入力値を検証するには:in-range:out-of-rangeクラスを使います。
 入力値の範囲によって自動的にスタイルを反映します。

 送信時に入力内容をチェックするは、oninvalid イベントハンドラーを利用します。 最小値、最大値があっているか、required 属性が指定しているかを設定することができます。

 3桁ごとにカンマ,による区切りについては3桁区切りを、上下ボタンを非表示にするには上下ボタンの非表示を参照してください。

- ad -

属性

 グローバル属性も持ちます。以下に主な属性のみを示します。

 ここでは送信するという前提でnameパラメーターは付けるようにしています。送信したくないデータにはnameパラメーターを付けない方法があります。

AttributeValueExtra information
type 扱うデータタイプまたはinputタグの形状
name*必須。データ送信のための属性です。
value 初期値または設定値
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。
max最大値。入力範囲の最大値。
min最小値。入力範囲の最小値。
step入力値の間隔。

ブラウザでの見え方(このページのスタイルが反映されています)

3桁区切り

 数値は場合によっては3桁区切りで表示したい場合があります。
 JavaScript と <input type="text"> を使って3桁区切りに表示する方法があります。 しかし、サーバーにデータを送る段階で数値に戻す必要が出てきます。3桁区切りで表記できませんが数値は数値として type="number" 扱った方が無難です。
 詳しくは数値の書式についてを参照してください。

上下ボタンの非表示

 数値を入力の補助をする右側に表示される上下ボタン(スピンボタン)を非表示にするには以下のようにスタイル宣言をします。

上下ボタンの非表示
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
  -moz-appearance:textfield;
}
実行結果

関連typeについて

  • button... 汎用ボタン。scriptに利用する
  • checkbox... 複数選択が可能。選択済みにするにはcheckedパラメータを追記する
  • color... カラーピッカー。色選択に使用します。
  • date... 日付け
  • datetime-local... 日付けと時刻(ローカルタイムゾーン)
  • email... emailアドレス
  • file... ファイルのアップロード
  • hidden... 画面に表示しないがサーバーに送信するデータ
  • image... 任意の画像を利用したカスタム用ボタン
  • month... 年度と月度
  • number... 数値
  • password... パスワード入力
  • radio... 選択肢が必要な場合
  • range... 調整バーによる数値入力
  • reset... リセットボタン。入力データをクリア
  • search... 検索用
  • submit... 送信ボタン
  • tel... 電話番号
  • text... テキスト入力。改行を含む場合は<textarea>を
  • time... 時刻
  • url... URL
  • week... 年度の第何週目か

- ad -