HTML5: inputタグで色の入力欄を表示する

inputタグで色を入力させる

HTML5ではinputタグでtype属性に”color”を指定すると色の入力欄を作ることが出来きる。

タグ：


<input type="color" name="hoge" value="#000000" />

表示例：

inputタグで色を選択させる

いくつかの色のリストの中から選択させたいときはlist属性とdatalist要素を用いる。

タグ：


<input type="color" name="hoge" value="#462066" list="colorlist" />

<datalist id="colorlist">
    <option value="#462066">
    <option value="#FFB85F">
    <option value="#FF7A5A">
    <option value="#00AAA0">
    <option value="#8ED2C9">
    <option value="#FCF4D9">
</datalist>

表示例：