HTML5 上下ボタン(スピナー)で数値を入力するサンプル(number)

HTML5の上下ボタン(スピナー)で数値を入力するサンプルです。
input要素のnumber属性を使用します。

確認環境
・Windows10
・Google Chrome

目次

上下ボタン(スピナー)で数値を入力するサンプル

カーソルを入力欄にあてると上下ボタンが表示されます。上または下のマークを押すと数値が変化します。このサンプルでは、値は1から10までにしています。

コード

上記サンプルのコードです。
9行目で、number属性を指定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>数値入力のサンプル</title>
</head>
<body >

<input type="number" value="1" min="1" max="10" step="1">

</body>
</html>

number属性

  • input要素のnumber属性です。<input type="number">となります。
  • 最小値はminにセットし、最大値はmaxセットします。
  • 初期値はvalueにセットします。
  • 数値を手入力するまたは上下ボタンを動かすと値がvalueにセットされます。
  • 増分値はstepにセットします。省略可能です。省略された場合は、1になります。
  • 以下はMDNのinput要素のリンクです。
    https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input

関連の記事

HTML5 プログレスバーの動きを表示するサンプル(progress)
HTML5 入力欄に入力候補を表示するサンプル(datalist)
HTML5 スライダーで数値を入力するサンプル(range)
HTML5 クリックして詳細情報を開く/閉じるサンプル(detailsとsummary)

△上に戻る