<input type="number"> / type="range"> / <datalist>

対応:		HTML5（2014）

数値入力には『type="number"』と『type="range"』が使えます。また、入力候補の一覧を提示する『datalist』要素、スライダーの現在値などを表示する『output』要素も、フォームをより使いやすくするために活用できます。

構文

<!-- 数値入力（スピナー付き） -->
<input type="number" name="qty" min="1" max="99" step="1" value="1">

<!-- スライダー -->
<input type="range" name="volume" min="0" max="100" value="50">

<!-- datalist（候補リスト） -->
<input type="text" name="city" list="cities">
<datalist id="cities">
  <option value="東京">
  <option value="大阪">
  <option value="名古屋">
</datalist>

<!-- カラーピッカー -->
<input type="color" name="theme" value="#3498db">

<!-- output（計算結果などの表示） -->
<output name="result" for="a b">0</output>

要素・属性一覧

要素・属性	概要
type="number"	数値専用の入力欄です。上下の矢印ボタン（スピナー）が表示されます。
type="range"	スライダー形式の入力コントロールです。現在値は視覚的に表示されません。
type="color"	カラーピッカーを表示して色を選択できます。送信値は『#rrggbb』形式の16進数です。
datalist	入力欄に入力候補のリストを関連付けます。入力欄の『list』属性に対応する『id』を指定します。
output	計算結果やスライダーの現在値など、JavaScript によって動的に更新される値を表示します。

サンプルコード

sample_input_number_range_datalist.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>number / range / datalist</title>
</head>
<body>

  <form oninput="vol_out.value = volume.value">

    <!-- 数値入力 -->
    <p>
      <label for="qty">数量（1〜10）：</label>
      <input type="number" id="qty" name="qty"
        min="1" max="10" step="1" value="1">
    </p>

    <!-- スライダー＋output で現在値を表示 -->
    <p>
      <label for="volume">音量：</label>
      <input type="range" id="volume" name="volume"
        min="0" max="100" value="50">
      <output name="vol_out" for="volume">50</output>
    </p>

    <!-- datalistで入力候補を提示 -->
    <p>
      <label for="city">都市名：</label>
      <input type="text" id="city" name="city" list="city_list"
        placeholder="都市名を入力">
      <datalist id="city_list">
        <option value="東京">
        <option value="大阪">
        <option value="名古屋">
        <option value="福岡">
        <option value="札幌">
      </datalist>
    </p>

    <!-- カラーピッカー -->
    <p>
      <label for="color">テーマカラー：</label>
      <input type="color" id="color" name="theme" value="#3498db">
    </p>

    <p><button type="submit">設定を保存</button></p>
  </form>

</body>
</html>

実行結果

数量欄にはスピナー付きの数値入力、音量欄にはスライダーとその右に現在値が「50」と表示されます。スライダーを動かすと数値がリアルタイムで変わります。都市名欄は入力するとサジェストが表示されます。

サンプルページはこちら

概要

『type="range"』は現在値が視覚的にわからないため、ほとんどの場合は『output』要素と組み合わせて使います。上のサンプルコードのように、フォームの『oninput』イベントを使うと、スライダーを動かすたびに出力値をリアルタイムで更新できます。

『datalist』はあくまで「候補の提示」であり、ユーザーはリストにない値も自由に入力できます。選択肢を強制したい場合は『datalist』ではなく『select』要素を使ってください。

『type="color"』は対応ブラウザ（Chrome・Firefox・Edgeなど）では専用のカラーピッカーUIが表示されますが、古いブラウザではテキスト入力として扱われる場合があります。送信される値は常に小文字の16進数カラーコード（例：『#3498db』）です。

対応ブラウザ

デスクトップ

Chrome

7 以降 ○

6 以前 ×

Firefox

29 以降 ○

28 以前 ×

Safari

5.1 以降 ○

4.1 以前 ×

Edge

12 以降 ○

11 ○

10 ○

9 ×

8 ×

7 ×

6 ×

Opera

15 以降 ○

14 以前 ×

モバイル

iOS Safari

5 以降 ○

4 以前 ×

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

JavaScriptとの連携

rangeスライダーは、現在値をリアルタイム表示させることでUXが大きく向上します。

<!-- rangeスライダーとリアルタイム表示 -->
<label for="volume">音量: <span id="volume-display">50</span></label>
<input type="range" id="volume" name="volume"
       min="0" max="100" value="50" step="5">

<!-- 数値入力とスライダーを連動させる -->
<label for="price-slider">価格上限: ¥<span id="price-display">5000</span></label>
<input type="range" id="price-slider" min="0" max="10000" value="5000" step="100">
<input type="number" id="price-number" min="0" max="10000" value="5000" step="100">

<script>
  // rangeの値をリアルタイムで表示
  var volumeSlider = document.getElementById('volume');
  var volumeDisplay = document.getElementById('volume-display');
  volumeSlider.addEventListener('input', function() {
    volumeDisplay.textContent = volumeSlider.value;
  });

  // rangeとnumberを連動させる
  var priceSlider = document.getElementById('price-slider');
  var priceNumber = document.getElementById('price-number');
  var priceDisplay = document.getElementById('price-display');

  priceSlider.addEventListener('input', function() {
    priceNumber.value = priceSlider.value;
    priceDisplay.textContent = priceSlider.value;
  });
  priceNumber.addEventListener('input', function() {
    priceSlider.value = priceNumber.value;
    priceDisplay.textContent = priceNumber.value;
  });
</script>

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典