[49-7] input要素で「色」を選んでもらおう (color)

<input type="color">で色を選んでもらう部品を作りましょう。
これもHTML5からの新しいtype属性の値です。

対応ブラウザでは「カラーピッカー」で色を選べます。
入力できる値は、#ff0000 のような16進数による色指定の値なので、カラーピッカーが出ないと、ユーザーが入力するのは無理だよね。

	type属性の値	部品の役割
<input>要素で作る 「色」入力の部品	type="color"　 new	色の入力

ほかの属性で機能を追加できます

この color も、type属性以外の属性を使って、さらに機能を追加できます。
（各属性については、それぞれのリンクで詳細をご覧ください。）

• list属性で、選択肢を表示する（<datalist>要素も併用します。）
• autofocus属性で、HTML文書のロード後すぐに「フォーカス（記入のための選択）」する
• form属性で <form>要素の外に出してレイアウトする
• autocomplete属性で「オートコンプリート（履歴から入力予測する）」機能の指定をする
• disabled属性で「使用不可」にする

required属性、readonly属性は使えません（指定しても機能しない）。

type="color" の対応ブラウザは…

<input type="color>は、Edge, Chrome, Firefox が対応しています。
ただし、Firefox は list属性には対応していません。
Safari は ver.11 から対応。IE は未対応です。
モバイルでは Android は対応（標準ブラウザも Android Chrome も）
iOS Safari, Opera Mini は未対応です。
（2017年12月記 / 参考：Can I use | Color input type）

type="color" で「色」をチョイスしてもらおう

colorは、カラーピッカーで色を選ぶための部品。単純なので決まり事は少ないです。

• 送信する値は「# (ハッシュ) 」で始まる16進数のウェブの色指定です。
  16進数の色指定については「 [14-4] 色指定について（16進数、色名、10進数、パーセント）」をご覧ください
• value属性を省略すると、初期値は「#000000（黒）」

全部デフォルト状態のサンプル

value属性を指定せず、name属性で部品名だけつけたサンプルです。

デフォルトで valueは #000000 (黒) 。
対応ブラウザでは、クリックで OS のカラーピッカーが開き、色を選べます。

色を選んでください。

<form class="sample">
  <span>色を選んでください。</span>
  <label><input type="color" name="ex"></label>
  <input type="submit" value="送信">
</form>

list属性で color の選択肢を作る

list属性で選択肢を絞り込めます。（<datalist>要素も併用します。）
こちらのほうが、ユーザーが選びやすくて、実用性がありますね。
（Firefox は color の list属性には未対応なので、先ほどのサンプルと変わりませんが）
対応ブラウザでは クリックでリストが現れます。（これは Chrome on Mac）

下のサンプルは、色を選ぶことで <form>要素の背景色が変わるようにしてみました。

色を選んでください。背景色が変わります。

HTML（と JavaScript）はこちら。

<form class="sample" id="bgChenge">
  <span>色を選んでください。背景色が変わります。</span>
  <label><input type="color" name="ex" id="bgColor" list="exlist" value="#ddeaf6">
  <datalist id="exlist">
    <option value="#ddd2aa"></option>
    <option value="#ffe3d5"></option>
    <option value="#d4ecad"></option>
    <option value="#ddeaf6"></option>
    <option value="#5888bd"></option>
    <option value="#cdbbd3"></option>
  </datalist></label>
</form>
<script>
var bgColor = document.getElementById('bgColor');
bgColor.onchange = function () {
  document.getElementById('bgChenge').style.backgroundColor = this.value;
  console.log('bgColor:'+this.value);
}
</script>

ここでは、リストの中の１色を <input type="color"> の value属性の値として書いてます（3行目）。この value値を設定しないと デフォルトの黒になります。

リスト内の色を1つ選んで value値にしておかないと、ユーザに「黒もあるんじゃん」と誤解を与えるので要注意ですね。

スクリプトは、changeイベントを使っています。
16行目の「.style.backgroundColor」で背景色を指定していますが、これを「.style.color」で文字色、「.style.borderColor」でボーダーカラーなどと、変化させられます。
変化させるターゲットの要素は ID で選んでいますので（14行目）、他の要素でもOK。

<input>要素の 索引ページ

<input>要素は「type属性の値」でいろいろなフォームの部品になります。
今回の「色」の選択の部品以外は、下記の一覧をご覧ください。

• <input>要素の type属性の値一覧

<input>要素は、type属性以外にもたくさんの属性があり、それによってフォーム部品に機能などを加えられます。詳しくは下記の一覧をご覧ください。

• <input>要素の 他の属性一覧

次回予告

次回は、ユーザがファイルを選んで送信できる <input type="file">を使いましょう。
これは昔からある値です。
ファイルを選択する画面が表示され、ユーザが自分のドライブに保存しているファイルを選んで、送信する事ができます。