HTML5のinput要素type属性、各種ブラウザでのキーボードの表示

HTML5で追加されたinput要素のtype属性を最新のブラウザで動作テスト。iOS 8＋Safari、スマホ Android 5＋Chrome、Windows＋Internet Explorer 11およびFirefox 40。

HTML5のinput要素type属性

だいぶ前の話だが、HTML5でinput要素のtype属性にnumber、email、telなどが追加された。
これらの属性値を指定すると、スマホではテキストボックスに文字を入力する際、最適なキーボードが予め表示される場合がある。
また、ブラウザによってはバリデーション（適切な文字列が使われているかチェック）するものもある。
2015年現在たいていのブラウザはHTML5に対応しているが、現在最新のブラウザで動作を確かめてみた。
使用した端末は、iPod touch第6世代（iOS 8＋Safari）、ファーウェイP8lite（Android 5＋Chrome）、Windows PC（Windows 7＋Internet Explorer 11およびFirefox 40）で、OSやブラウザが同じでも機種により動作が異なる場合がある。
また、属性はtype、value、nameのみ使用。

input type="text"

これはHTML5以前からある属性値で、とりあえず動作を確認。
iPod touch第6世代（Safari）、ファーウェイP8lite（Chrome）ともに日本語かな入力が表示される。

input type="number"

iPod touch第6世代（Safari）、ファーウェイP8lite（Chrome）ともに数字入力になる。
Chromeでは数字以外は入力できない。
WindowsのInternet Explorer 11も数字以外は入力できない。
Windows版Firefox 40では数字以外も入力できるが、submit時に警告が表示される。

input type="email"

iPod touch第6世代（Safari）では日本語かな入力が表示される。
ファーウェイP8lite（Chrome）はアルファベットが表示され、メールアドレスに使えない文字を入力すると警告が表示され、submit時にも警告が表示される。
WindowsではInternet Explorer 11、Firefox 40ともにsubmit時に警告が表示される。

input type="tel"

iPod touch第6世代（Safari）、ファーウェイP8lite（Chrome）ともに数字入力になる。
ただし、Safariはハイフンがない。

input type="url"

iPod touch第6世代（Safari）、ファーウェイP8lite（Chrome）ともにアルファベット入力になる。
Safariは上記type="email"では日本語かな入力になるが、こちらはきちんとアルファベットになる。
Safari以外バリデーションが働き、警告が出るタイミングは上記type="email"と同じ。

input type="search"

iPod touch第6世代（Safari）、ファーウェイP8lite（Chrome）ともに日本語かな入力になる。



iPod touch第6世代（Safari）は、以上の属性値ではバリデーションが働かなかった。
意外にも？Internet Explorer 11はバリデーションが働いた。
追加された属性値は他にもたくさんあるが、追加された中で今後使おうと思えるのはnumberだけかな・・・。