HTML5のform拡張が今のブラウザでどの程度対応しているのだろうかとちょっと試してみました。あらかじめ断っておきますが、対応していないブラウザでみると、全く何がなんだかなよくわからないエントリです。
まずはtypeコンテンツ属性です。
・typeコンテンツ属性
<input type=”ココにいれる属性” />
結論からいうとOperaが一番対応しているみたいですね。次はSafariやChromeといったWebkit系のブラウザですが、Operaの対応ぶりと比較するとかなり差がついてしまっているようです。FirefoxはFF8でも全くといってよい程対応してません。IEは試せる環境がないので試していませんが、IE9だとどうなんのでしょうか。
というわけで、Operaを使える環境の方はOperaでご覧ください。
以下は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
|
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”