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

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

対応ブラウザでは「カラーピッカー」で色を選べます。
入力できる値は、#ff0000 のような16進数による色指定の値なので、カラーピッカーが出ないと無理だよね。
これは Opera (on Win) のプレビュー。

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

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

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

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

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

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

<input type="color>は、WinもMacも ChromeOpera が対応しています。
Firefox と Safari は未対応でした。(2013年4月記)

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

じゃ、使ってみましょう。
colorは、カラーピッカーで色を選ぶための部品。単純なので決まり事は少ないです。

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

<input type="color" name="ex1">

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

これはChrome (on Win) のプレビュー。
スピンボタン( スピンボタン )が出ませんが、クリックでシステムのカラーピッカーが開きます。

同じサンプル1の Opera (on Win) でのプレビュー。Operaではスピンボタン( スピンボタン )が出て、まず、20色のピッカーから選べます。下方の「その他」からシステムのカラーピッカーが開きます。
(クリックでサンプルHTMLが開きます)

●サンプル2
list属性で選択肢を絞り込みました。(<datalist>要素も併用します。)
こちらのほうが実用性がありますね。

<input type="color" name="ex2" list="exlist" value="#DDEAF6">
<datalist id="exlist">
<option value="#999999"></option>
<option value="#DDD2AA"></option>
<option value="#FFE3D5"></option>
(以下略)
</datalist>

ここでは、リストの中の1色を value属性の値として書いてます。
value値を設定しないと、デフォルトの黒になります。黒を選択リストに入れてない時、リストとしては出てきませんが、ユーザに「黒もあるんじゃん」と誤解を与えるので要注意です。リスト内の色を1つ選んで value値にしておきましょう。

これはChrome (on Win) のプレビュー。
スピンボタン( スピンボタン )をクリックすれば、リストが現れます。下方の「その他」でシステムのカラーピッカーが開きます。(これどうにかできないかな)

Opera (on Win) でのプレビューも同じ。
スピンボタン( スピンボタン )からリストを選べて「その他」でシステムのカラーピッカーが開きます。
(クリックでサンプルHTMLが開きます)

この <input type="color"> は、カラーピッカーが出なければ意味が無いですね。ユーザが色を16進数で入力することを期待するのは無理があるので。
なので、すべてのブラウザが対応しないとつけませんが、他の新しい部品と比べたら、ChromeOpera が対応しているので、けっこう将来が期待できる部品かと思います。

HTML5のフォームサンプル

HTML5での新要素を使ったフォームのサンプルです。今回の<input type="color">も使っています。

クリックするとサンプルHTMLで見られます。
Sample46_HTML5のフォーム (サンプル)

次回予告

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

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 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 29 30 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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