Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

HTML5新要素 input type="number"

概要

input type="number"タグについて説明します。

内容

input type="number"は数値入力欄です。

属性として以下の利用が可能です
max = 最大値を設定
min = 最小値を設定
list = 入力候補を設定
※2012/03/19現在 Operaのみ使用可能
step = ステップ幅を設定。

サンプル

<!DOCTYPE HTML>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>input type="number"</title>
  </head>
  <body>
  <form action="">
    number:<input type="number" name="number" id="number" value="" max="12" min="1" style="width:200px;" required step="0.5" />
    <input type="submit" name="" value="submit" />
  </form>
  </body>
</html>

完成画面のキャプチャ

初期表示

スピナーで値を変更可能。移動範囲はstepの値で移動し、移動可能範囲はmin〜maxに限定される

min〜max範囲外なら警告

stepに設定した値に当てはまらない値を指定するとエラー