HTML【フォーム】5～input要素（7）色（color）の入力部品

今回は、input要素で作る部品の中で、色（color）を入力する部品についてまとめます。

フォームについては、こちらのページもご参照下さい。

HTML 【フォーム】1 ～ フォームの概要とform要素の属性一覧
HTML 【フォーム】2 ～ form要素の使い方
HTML 【フォーム】3 ～ form要素で使う主な属性の使い方
HTML 【フォーム】4 ～ fieldset要素とlegend要素
HTML 【フォーム】5 ～ input要素（1）フォーム部品一覧
HTML 【フォーム】5 ～ input要素（2）テキスト入力部品
HTML 【フォーム】5 ～ input要素（3）ラジオボタンとチェックボックス
HTML 【フォーム】5 ～ input要素（4）日時の入力部品
HTML 【フォーム】5 ～ input要素（5）数値の入力部品
HTML 【フォーム】5 ～ input要素（6）レンジ（range）の入力部品
HTML 【フォーム】5 ～ input要素（7）色（color）の入力部品（ 本ページ ）
HTML 【フォーム】5 ～ input要素（8）ファイル送信のための部品
HTML 【フォーム】5 ～ input要素（9）隠し情報（hidden）
HTML 【フォーム】5 ～ input要素（10）ボタン（submit、reset、button）
HTML 【フォーム】5 ～ input要素（11）画像ボタン（image）
HTML 【フォーム】6 ～ button要素で作るボタン
HTML 【フォーム】7 ～ ボタンの作り方比較とJavaScriptでアラート表示
HTML 【フォーム】8 ～ セレクトリスト
HTML 【フォーム】9 ～ 入力候補（datalist）
HTML 【フォーム】10 ～ テキストエリア（textarea）
HTML 【フォーム】11 ～ ラベル（label）
HTML 【フォーム】12 ～ 出力欄（output）
HTML 【フォーム】13 ～ 数量や割合のゲージ（meter）
HTML 【フォーム】14 ～ 進捗状況を示すプログレスバー（progress）
HTML 【フォーム】15 ～ キーを発行して暗号化（keygen）
HTML 【フォーム】16 ～ CSSでフォームを整える

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. 色を入力する部品

色を入力するためのinput要素のtype属性の値は、HTML5からの新しい属性値です。

	type属性の値	部品の種類
input要素で作る 色入力のための部品	type　=　”color”	色の入力フォーム

　
対応ブラウザなら、カラーピッカーが表示されて色が選択できます。

上の表示に対するhtmlコードは、以下の通りです。

<input type="color">

画面ロード時にデフォルト表示される色をクリックすると、上記のカラーピッカーが表示されます。

▲目次へ戻る

2. type以外の属性で機能を追加

type属性以外の属性を使って、機能を追加することができます。

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

　
required属性及びreadonly属性は使えません。

▲目次へ戻る

3. colorで入力

<input type=”color”>は、色（color）を入力するための部品です。
colorは、カラーピッカーで色を選択するための部品です。

colorには次のようなルールがあります。
単純な作りですので、決まり事は少ないです。

●<input type=”color”>で入力欄を作ると、ブラウザで次のように表示されます。

上の表示に対するhtmlコードは、以下の通りです。

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

name属性で、test1という部品名を付けています。name属性を指定しないとデータの送信が行えないので、name属性の指定は必須です。

value属性を指定していないので、デフォルトで valueは #000000 (黒) となり、黒が表示されています。

表示された色（上の例では黒）をクリックすると、カラーピッカーが開いて色の選択入力が可能になります。

●list属性を使用すると、ブラウザで次のように表示されます。

上の表示に対するhtmlコードは、以下の通りです。

<input type="color" name="test2" list="tlist" value="#FFFF00">
<datalist id="tlist">
<option value="#FF0000"></option>
<option value="#00FF00"></option>
<option value="#0000FF"></option>
<option value="#FFFF00"></option>
</datalist>

リストで表示する色を、それぞれvalue属性の値として指定します。上の例では、#FF0000（赤）、#00FF00（ライム）、#0000FF（青）、#FFFF00（黄色）を指定してリスト表示させています。

リストと共に表示される「その他」をクリックすると、カラーピッカーが開いて、リスト外の色も選択可能になります。

value属性の値を#FFFF00（黄色）に指定しているので、ロード直後に黄色が表示されます。
value属性の値を指定しない場合は、デフォルト値の黒になりますが、黒を選択リストに設定していない場合は、ロード時にリストにない色が表示されてユーザを混乱させてしまうので、リスト内の色からvalue属性の値を指定しておいた方が無難です。

▲目次へ戻る

4. Webセーフカラー

Webセーフカラーのカラーチャートを貼付します。
Webセーフカラー（Web　Safe　Color）とは、Web上の色をRGB値の三原色をそれぞれ6段階に分割し、「00」、「33」、「66」、「99」、「CC」、「FF」の6種類のみを組み合わせた216色のことです。
ブラウザの違い等、Web環境に左右されることが少ないため、Web上で古くから使われている色です。

Web上での色指定について、詳しくはHTML 【 色指定 】 ～ colorの指定方法をご参照下さい。

▲目次へ戻る