“input”要素~“type="color"”

“type="color"”

“type="color"”を指定した“input”要素は色の入力欄を表します。

フォームの送信時には“name”属性の値とともに入力された色が7文字の16進数カラーコード(“#rrggbb”)で送信されます。

“value”属性で指定されない場合の入力値の初期値は■(“#000000”)です。7文字の16進数カラーコード以外の書式(カラーネームやアルファチャネルのある9文字の16進数カラーコードなど)で指定された場合も“#000000”とみなされます。

ブラウザによって入力時に表示されるインターフェースが異なります。ブラウザによっては色を選択するためのカラーパレットやRGB値を編集するスライダーが表示されます。

対応していないブラウザでは単純なテキスト入力欄(“type="text"”)として扱われます。

サンプルコード

<form method="post" action="sample-inputtag2.php" target="_blank">

<fieldset>

<p><label>好きな色：<input type="color" name="sample01"></p>

</fieldset>
<p><button type="submit">送信する</button></p>

</form>

好きな色：

送信する

＊送信すると入力内容が表示されます。

属性と値

属性		値
属性	説明	値	説明
必須属性
type=""	入力欄の種類	color	色の入力欄
任意属性
グローバル属性
autocomplete=""	ブラウザーによるオートコンプリートの可否	on	オートコンプリートを行う
		off	オートコンプリートを行わない
disabled=""	入力欄を無効化	disabled	入力欄を無効化
form=""	関連付けるフォーム	ID名	関連づける“form”要素の“id”属性の値
list=""	入力値の候補と関連付ける	ID名	関連づける“datalist”要素の“id”属性の値
name=""	入力欄の名前	文字列	入力欄の名前
value=""	フォームで送信する値の初期値	色	16進数カラーコード(“#rrggbb”)

仕様書

color