目次
| サンプル | 上下ボタン(スピナー)で数値を入力する |
| number属性 |
上下ボタン(スピナー)で数値を入力する
カーソルを入力欄にあてると上下ボタンが表示されます。上または下のマークを押すと数値が変化します。このサンプルでは、値は１から10までにしています。
上記サンプルのコードです。
<!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>9行目で、number属性を指定しています。
number属性
- input要素のnumber属性です。<input type="number">となります。
- 最小値はminにセットし、最大値はmaxセットします。
- 初期値はvalueにセットします。
- 数値を手入力するまたは上下ボタンを動かすと値がvalueにセットされます。
- 増分値はstepにセットします。省略可能です。省略された場合は、1になります。
- 以下はMDNのinput要素のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input
関連の記事