PIYO - Tech & Life -

今更input type=color の存在を知る

HTML

HTML5のinput type=colorの存在を今の今まで知りませんでしたが、たまたま知りました。

Webでカラーピッカー使ったことなくて、という言い訳だけしとこ。

<input type="color">

で↓が出ます（Safariだと単なるInputに見えると思う）。

ちなみにRailsだと、color_fieldが使えます。

= form_for(object) do |f|
  = f.color_field :color

もしかして他にも知らないのあるのかも？と思ってMDNで調べてみました。

<input>: 入力欄 (フォーム入力) 要素 - HTML: HyperText Markup Language | MDN
HTML の <input> 要素は、ユーザーからデータを受け取るための、ウェブベースのフォーム用の対話的なコントロールを作成するために使用します。端末とユーザーエージェントによりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。
developer.mozilla.org

全部で20ちょいのtypeがあるようです。

  • button
  • checkbox
  • color → 知った
  • date
  • datetime-local → 知らなかった
  • email
  • file
  • hidden
  • image
  • month → 知らなかった
  • number
  • password
  • radio
  • range → 知らなかった
  • reset → 知らなかった
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week → 知らなかった

知らないのが5つありました。colorを含めると6つですね。

このうちcolorとrangeあたりは使うタイミングがありそうなので、よく覚えておきます。