HTML5のフォームの機能拡張へのブラウザの実装はどうなんだ? : typeコンテンツ属性の場合

 HTML5のform拡張が今のブラウザでどの程度対応しているのだろうかとちょっと試してみました。あらかじめ断っておきますが、対応していないブラウザでみると、全く何がなんだかなよくわからないエントリです。
  
 まずはtypeコンテンツ属性です。

・typeコンテンツ属性
 <input type=”ココにいれる属性” />

 結論からいうとOperaが一番対応しているみたいですね。次はSafariやChromeといったWebkit系のブラウザですが、Operaの対応ぶりと比較するとかなり差がついてしまっているようです。FirefoxはFF8でも全くといってよい程対応してません。IEは試せる環境がないので試していませんが、IE9だとどうなんのでしょうか。

というわけで、Operaを使える環境の方はOperaでご覧ください。

HTML5の新type属性のテスト

 以下はW3CのHTML5の仕様からの抜粋になりますが、HTML4時代からあるtypeコンテンツ属性を含めると以下になるようです。HTML5で新しく採用されたtypeコンテンツ属性、実装にあまり進展が見られないような気がします。

Keyword State Data type Control type
hidden

Hidden An arbitrary string n/a
text Text Text with no line breaks Text field
search

Search Text with no line breaks Search field
tel Telephone Text with no line breaks A text field
url

URL An absolute IRI A text field
email E-mail An e-mail address or list of e-mail addresses A text field
password

Password Text with no line breaks (sensitive information) Text field that obscures data entry
datetime Date and Time A date and time (year, month, day, hour, minute, second, fraction of a second) with the time zone set to UTC A date and time control
date

Date A date (year, month, day) with no time zone A date control
month Month A date consisting of a year and a month with no time zone A month control
week

Week A date consisting of a week-year number and a week number with no time zone A week control
time Time A time (hour, minute, seconds, fractional seconds) with no time zone A time control
datetime-local

Local Date and Time A date and time (year, month, day, hour, minute, second, fraction of a second) with no time zone A date and time control
number Number A numerical value A text field or spinner control
range

Range A numerical value, with the extra semantic that the exact value is not important A slider control or similar
color Color An sRGB color with 8-bit red, green, and blue components A color well
checkbox

Checkbox A set of zero or more values from a predefined list A checkbox
radio Radio Button An enumerated value A radio button
file

File Upload Zero or more files each with a MIME type and optionally a file name A label and a button
submit Submit Button

An enumerated value, with the extra semantic that it must be the last value selected and initiates form submission A button
image Image Button A coordinate, relative to a particular image’s size, with the extra semantic that it must be the last value selected and initiates form submission Either a clickable image, or a button
reset

Reset Button n/a A button
button Button n/a A button

from “4.10.7 The input element”. “HTML5 A vocabulary and associated APIs for HTML and XHTML”  
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です