色コードを入力するためのコントロールを作るには?
input type="color"タグの書式
input type="color"タグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
input type="color"タグの属性一覧
属性 | 内容 |
グローバル属性 | ※グローバル属性のページを参照してください。 |
指定可能なフォーム部品の共通属性 | name、disabled、form、autocomplete、autofocus、list、value ※フォーム部品の共通属性のページを参照してください。 |
input type="color"タグの解説
<input>タグは、入力コントロールを表す要素です。
<input>要素の「type」属性に「color」を指定すると、色を入力するコントロールを
作ることができます。
なお、実際には「%23ed1c24」(%23は「#」なので「#ed1c24」)のような文字列がサーバー側へ送信されます。
input type="color"タグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
</head>
<body>
<p>好きな色を教えてください。</p>
<form action="sample.cgi" method="post">
<p>好きな色:<input type="color" name="cl"></p>
<p><input type="submit"></p>
</form>
</body>
</html>
input type="color"タグのサンプル画面1
input type="color"タグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
</head>
<body>
<section>
<h1>年賀状印刷</h1>
<form action="sample1.cgi" method="post">
<p>絵柄を選択してください。
<select>
<option>干支</option>
<option>花</option>
<option>写真</option>
</select>
</p>
<p><label>文字色: <input type="color" name="color"></label></p>
<p><input type="submit" value="送信"></p>
</form>
</section>
</body>
</html>
input type="color"タグのサンプル画面2
input type="color"タグの関連項目