input type="color"

提供: ASCII.jp HTMLリファレンス

ver.未対応~ ver.未対応~ ver.未対応~ ver.未対応~ ver.11.5~
意味 色の入力
読み方 インプット

カテゴリー

フロー・コンテンツ
フレージング・コンテンツ
インタラクティブ・コンテンツ
リスト化/ラベル付け可能/送信可能/リセット可能なフォーム関連要素

親にできる要素/カテゴリー

フレージング・コンテンツが期待される場所

子にできる要素/カテゴリー

<input 属性="値">

属性 概要
name 文字列 フィールドの名前
value 文字列 デフォルト値
autocomplete 「on」または「off」 オートコンプリート機能のオン/オフ
list 文字列 datalist要素のID(type="password"の時を除く)

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 type属性の値が「color」のinput要素は、色を選ぶための要素になります。選択された色は、「#113355」のように「#」の後に16進数で表示されます。

 ただし、本書執筆時点では、主要Webブラウザー※でtype="color"の機能を実装しているのは、Opera 11.5だけです。その他のWebブラウザーは、1行入力と同じ動作になります。

 Opera 11.5は、ドロップダウン形式のコントロールが表示され、見本の中から色を選べます。

 なお、autocomplete、list属性の使い方は、input 1行入力系と同じです。
※Internet Explorer、Firefox、Google Chrome、Safari、Opera

サンプル

(body要素の内部のみ掲載)

<form action="server.php" method="post">
<p><label>color:<input type="color" name="col"></label></p>
<p><input type="submit" value="送信"></p>
</form>

サンプル実行画像

 Internet Explorer 9での表示例です。type="color"の処理が実装されていないので、1行入力欄が表示されます。

 Opera 11.5でフォームを開いて、色を選択した例です。ドロップダウンで色を選べます。

Powered by Web Professional

目次