<input type="color">

ブラウザ
  • Cr
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素リスト化サブミット可能リセット可能再関連付け可能ラベル付け可能) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容

input要素type="color" を指定すると、色の入力欄を作成できます。


<input type="color" name="example1">

<input type="color" name="example2" value="#ff0000">

属性
任意属性(共通)
type="" 部品のタイプ color 色の入力欄
name="" 部品の名前 文字列 部品を識別するための名前
value="" 送信される値 カラーコード 入力欄の初期値 (書式: #000000
disabled 部品の無効化 disabled 値は省略可能
form="" [+]フォームとの関連付け ID名 関連付けるform要素に指定したID名
autofocus [+]自動フォーカスの指定 autofocus 値は省略可能、1つの文書に1つだけ指定可能
任意属性
autocomplete="" [+]オートコンプリート on オートコンプリートを有効にする
off オートコンプリートを無効にする
list="" [+]入力候補のリスト ID名 関連付けるdatalist要素に指定したID名
  • value属性を省略した場合は、#000000 (黒)が初期値となります。

type属性name属性value属性disabled属性form属性autofocus属性の詳細については、input要素のページを参考にしてください。

このタイプの特徴

色(カラーコード)を入力するための入力欄です。

(実際の表示例)

このタイプに対応しているブラウザでは、カラーチャートを使ってカラーコードを入力することができます。

カラーコードの書式

入力するカラーコード、及びvalue属性の値は、次の書式で記述する必要があります。

#ffffff
#000000#ffffff
  • ハッシュ( # )で始まる6桁のカラーコードで指定します。
  • 6桁のコードは、最初の2桁が赤、次の2桁が緑、最後の2桁が青を意味しています。
  • 各色の強さを 00ff までの16進数で指定します。
  • 00 に近いほどその色は弱くなり、ff に近いほどその色が強調されます。
  • 例えば、#ff0000 は赤、#ffffff は白、 #000000 は黒になります。
<input type="color" name="example" value="#ff0000">

autocomplete属性について

autocomplete属性は、オートコンプリート機能(入力内容の自動補完)を使うかどうかを指定します。

値には on(使う)または off(使わない)を指定します。この属性を省略した場合は、form要素の設定内容が使用されます。(form要素にも指定されていない場合は on の状態がデフォルトとなります)

<input type="color" name="example" autocomplete="off">
  • HTML 5.1では、input要素のautocomplete属性に on / off 以外の値も指定できるようになりました(詳しくは仕様書をご覧ください)。これにより、きめ細やかな設定が行えるようになります。

list属性について

list属性は、入力候補リストの表示を指定します。この属性を使用する場合は、datalist要素で入力候補のリストを作成しておく必要があります。

値には、datalist要素に指定したID名を記述します。(datalist要素は、form要素の外に配置することも可能です)

<input type="color" name="example" list="data1" value="#ff0000">

<datalist id="data1">
<option value="#ff0000"></option>
<option value="#00ff00"></option>
<option value="#0000ff"></option>
</datalist>
  • Chrome(55)とOpera(12)では、入力候補として設定した色がカラーチャート内に表示されます。

使用例

デフォルト
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。

<form method="get" action="input_color.html">

<p><input type="color" name="example"></p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

入力候補のリストを指定した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。

<form method="get" action="input_color.html">

<p><input type="color" name="example" list="color1" value="#002b55"></p>

<datalist id="color1">
<option value="#002b55"></option>
<option value="#004080"></option>
<option value="#0055aa"></option>
<option value="#006ad5"></option>
<option value="#0080ff"></option>
<option value="#2b95ff"></option>
<option value="#55aaff"></option>
<option value="#80bfff"></option>
<option value="#aad5ff"></option>
<option value="#d5eaff"></option>
<option value="#eaf4ff"></option>
<option value="#f4faff"></option>
</datalist>

<p><input type="submit" value="送信する"></p>

</form>

表示例