input type="color"タグ
input type="color"は、色の入力欄を作成するタグです。
解説
input type="color"を使うと、色を選択する入力欄を作る事が出来ます。
しかし、HTML5に対応していないブラウザでは使用できないため注意が必要です。
コンテンツ・モデル
| カテゴリー (自カテゴリ) | フロー・コンテンツ フレージング・コンテンツ インタラクティブ・コンテンツ |
| コンテキスト (親カテゴリ) | フレージング・コンテンツを許可する場所 |
| コンテンツ・モデル (子カテゴリ) | なし |
属性
input（type="color"）タグには以下の属性が指定できます。
| 属性 | 説明 |
|---|---|
| name | 名前を指定する（submit時にこの名前で送信される） （例）name="col01" |
| value | 値を指定する （例）value="#ffff00" |
| readonly | 読取専用にする （例）readonly="readonly" ※readonlyのみでもOKです。 |
| 属性 | 説明 |
|---|---|
| class | クラスを指定する （例）class="hoge" |
| id | IDを指定する （例）id="foo" |
| style | スタイルを指定する （例）style="color:red;" |
その他のグローバル属性値については、グローバル属性をご覧ください。
サンプル
色の入力欄を作成する（初期値：なし）
<input type="color" name="col01">
未指定時の初期値は「#000000」です。
色の入力欄を作成する（初期値：#ffff00(黄色)）
<input type="color" name="col02" value="#ffff00">
備考
- value値のフォーマットは、16進数RGB形式です（例：#ff9900）
- input type="color"タグは値が無い状態が無いため、required属性は指定しても意味がありません。
- input（type="time"）は、HTML5から新たに追加になったタグです。
関連項目
- form：送信フォームを作成する
- input type="text"：テキスト入力欄を作成する
- input type="checkbox"：チェックボックス欄を作成する
- input type="date"：日付入力欄を作成する
- input type="time"：時刻入力欄を作成する
- input type="month"：月の入力欄を作成する
- input type="week"：週の入力欄を作成する
- input type="radio"：ラジオボタンを作成する
- input type="password"：パスワード入力欄を作成する
- input type="hidden"：隠しパラメータを作成する
- input type="file"：ファイル送信コントロールを作成する
- input type="button"：汎用ボタンを作成する
- input type="image"：画像ボタンを作成する
- input type="number"：数値入力欄を作成する
- input type="submit"：送信ボタンを作成する
- input type="reset"：リセットボタンを作成する
- input type="color"：色の入力欄を作成する
- input type="email"：e-mailの入力欄を作成する
- input type="url"：URLの入力欄を作成する
- input type="tel"：電話番号の入力欄を作成する
- input type="range"：スライダー入力欄を作成する
