[49-7] input要素で「色」を選んでもらおう (color)

最終更新日:2018年01月31日  (初回投稿日:2013年04月16日)

<input type="color">でを選んでもらう部品を作りましょう。
これもHTML5からの新しいtype属性の値です。

対応ブラウザでは「カラーピッカー」で色を選べます。
入力できる値は、#ff0000 のような16進数による色指定の値なので、カラーピッカーが出ないと、ユーザーが入力するのは無理だよね。

  type属性の値 部品の役割
<input>要素で作る
「色」入力の部品
type="color"  new 色の入力

ほかの属性で機能を追加できます

この color も、type属性以外の属性を使って、さらに機能を追加できます。
(各属性については、それぞれのリンクで詳細をご覧ください。)

  • list属性で、選択肢を表示する(<datalist>要素も併用します。)
  • autofocus属性で、HTML文書のロード後すぐに「フォーカス(記入のための選択)」する
  • form属性で <form>要素の外に出してレイアウトする
  • autocomplete属性で「オートコンプリート(履歴から入力予測する)」機能の指定をする
  • disabled属性で「使用不可」にする

required属性、readonly属性は使えません(指定しても機能しない)。

type="color" の対応ブラウザは…

<input type="color>は、Edge, Chrome, Firefox が対応しています。
ただし、Firefox は list属性には対応していません。
Safari は ver.11 から対応。IE は未対応です。
モバイルでは Android は対応(標準ブラウザも Android Chrome も)
iOS Safari, Opera Mini は未対応です。
(2017年12月記 / 参考:Can I use | Color input type

type="color" で「色」をチョイスしてもらおう

colorは、カラーピッカーで色を選ぶための部品。単純なので決まり事は少ないです。

全部デフォルト状態のサンプル

value属性を指定せず、name属性で部品名だけつけたサンプルです。

デフォルトで valueは #000000 (黒) 。
対応ブラウザでは、クリックで OS のカラーピッカーが開き、色を選べます。

色を選んでください。
<form class="sample">
  <span>色を選んでください。</span>
  <label><input type="color" name="ex"></label>
  <input type="submit" value="送信">
</form>

list属性で color の選択肢を作る

list属性で選択肢を絞り込めます。(<datalist>要素も併用します。)
こちらのほうが、ユーザーが選びやすくて、実用性がありますね。
(Firefox は color の list属性には未対応なので、先ほどのサンプルと変わりませんが)
対応ブラウザでは クリックでリストが現れます。(これは Chrome on Mac)

下のサンプルは、色を選ぶことで <form>要素の背景色が変わるようにしてみました。

色を選んでください。背景色が変わります。

HTML(と JavaScript)はこちら。

<form class="sample" id="bgChenge">
  <span>色を選んでください。背景色が変わります。</span>
  <label><input type="color" name="ex" id="bgColor" list="exlist" value="#ddeaf6">
  <datalist id="exlist">
    <option value="#ddd2aa"></option>
    <option value="#ffe3d5"></option>
    <option value="#d4ecad"></option>
    <option value="#ddeaf6"></option>
    <option value="#5888bd"></option>
    <option value="#cdbbd3"></option>
  </datalist></label>
</form>
<script>
var bgColor = document.getElementById('bgColor');
bgColor.onchange = function () {
  document.getElementById('bgChenge').style.backgroundColor = this.value;
  console.log('bgColor:'+this.value);
}
</script>

ここでは、リストの中の1色を <input type="color"> の value属性の値として書いてます(3行目)。この value値を設定しないと デフォルトの黒になります。

リスト内の色を1つ選んで value値にしておかないと、ユーザに「黒もあるんじゃん」と誤解を与えるので要注意ですね。

スクリプトは、changeイベントを使っています。
16行目の「.style.backgroundColor」で背景色を指定していますが、これを「.style.color」で文字色、「.style.borderColor」でボーダーカラーなどと、変化させられます。
変化させるターゲットの要素は ID で選んでいますので(14行目)、他の要素でもOK。

<input>要素の 索引ページ

<input>要素は「type属性の値」でいろいろなフォームの部品になります。
今回の「色」の選択の部品以外は、下記の一覧をご覧ください。

<input>要素は、type属性以外にもたくさんの属性があり、それによってフォーム部品に機能などを加えられます。詳しくは下記の一覧をご覧ください。

次回予告

次回は、ユーザがファイルを選んで送信できる <input type="file">を使いましょう。
これは昔からある値です。
ファイルを選択する画面が表示され、ユーザが自分のドライブに保存しているファイルを選んで、送信する事ができます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.