<input type="color">
| ブラウザ |
|
|---|---|
| 分類 | フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素（リスト化、サブミット可能、リセット可能、再関連付け可能、ラベル付け可能） / パルパブル・コンテンツ |
| 利用場所 | フレージング・コンテンツが置ける場所 |
| 内容 | 空 |
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桁が青を意味しています。
- 各色の強さを
00～ffまでの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>
- 表示例