HTML5では、フォームのinput要素にtype属性が大幅に追加されました。用途にあわせて細かく使い分けができるので便利なのですが、やはり気になるのはブラウザの対応状況です。
最近HTML5のフォームに触る機会があって、ブラウザの対応状況はどこまで進んだのだろうと気になったので調べて見ました。

HTML5FormInput ブラウザ別対応表


Opera

Firefox

Chrome

IE
11.5 7 14 9
search 検索 ×
tel 電話番号 ×
url URL ×
email メールアドレス ×
datetime 年月日と時間(UTCあり) × ×
date 年月日 × ×
month 年月 × ×
week × ×
time 時間 × ×
datetime-local 年月日と時間(UTCなし) × ×
number 数値 × ×
range 範囲をもつ数値 × ×
color RGBカラー × × ×

CSS3ではFirefoxやChromeに遅れをとっている感のあるOperaですが、フォームまわりに関しては無双状態です。日付選択やカラーピッカーのUIもブラウザのデフォルトとしては十分なレベルだと思います。
Chromeもある程度は対応していますが、Operaに比べるとUIが雑です。日付選択関係はもう少しなんとかしてほしい。
Firefoxはほとんどだめで、バージョン4のときから全く対応が変わっていないのも問題です。
IEはいつもどおりの対応です。

フォームコントロールUIギャラリー

新しく追加されたInputを並べてみました。使っているブラウザが対応しているかどうかが分かります。(search,tel,url,emailはテキストフィールドのままなのでわかりづらいですが)

search

tel

url

email

datetime

date

month

week

time

datetime-local

number

range

color


  1. […] HTML5で追加されたフォームInputのブラウザ対応状況まとめ | HALAWATA.NET […]