Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
<input type="number"> / type="range"> / <datalist>
数値入力には『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 によって動的に更新される値を表示します。 |
サンプルコード
<!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」と表示されます。スライダーを動かすと数値がリアルタイムで変わります。都市名欄は入力するとサジェストが表示されます。
<!-- ブラウザ上での表示イメージ --> 数量（1〜10）：[ 1 ▲▼ ] 音量： ──●────── 50 都市名：[東京 ] ← 入力中にサジェスト一覧が出る テーマカラー：[ ■ ] ← クリックでカラーピッカー表示 [ 設定を保存 ]
概要
『type="range"』は現在値が視覚的にわからないため、ほとんどの場合は『output』要素と組み合わせて使います。上のサンプルコードのように、フォームの『oninput』イベントを使うと、スライダーを動かすたびに出力値をリアルタイムで更新できます。
『datalist』はあくまで「候補の提示」であり、ユーザーはリストにない値も自由に入力できます。選択肢を強制したい場合は『datalist』ではなく『select』要素を使ってください。
『type="color"』は対応ブラウザ（Chrome・Firefox・Edgeなど）では専用のカラーピッカーUIが表示されますが、古いブラウザではテキスト入力として扱われる場合があります。送信される値は常に小文字の16進数カラーコード（例：『#3498db』）です。
対応ブラウザ
Chrome49 以降 ○
6 以前 ×
Firefox57 以降 ○
28 以前 ×
Safari18 以降 ○
5 以前 ×
Edge80 以降 ○11 以前 ×
IE11 以降 ○9 以前 ×
Opera48 以降 ○
14 以前 ×
iOS Safari18 以降 ○4 以前 ×
Android Browser37 以降 ○4 以前 ×
Chrome Android36 以降 ○17 以前 ×
Firefox Android79 以降 ○28 以前 ×記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする