

#
“type="color"”
送信可能な値 | 7文字の16進数カラーコード(“#rrggbb”) |
妥当性のチェック | 書式の制約あり |
“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”) |
#