HTML5のinputタグにおけるtype属性のサポート状況
ブラウザ標準の機能でカレンダーコンポーネントを使ったコードを書きたくて、ついでに単純なHTMLを書いて検証してみた。
試したのは以下のブラウザ。
- Windows 7 Professional SP1
- Firefox 39.0
- Google Chrome 44.0.2403.107 m (64-bit)
- Opera 30.0.1835.125
- Safari 5.1.7
- Internet Explorer 11.0.9600.17914
- Android 4.4.2
- 標準ブラウザ
書いたのは以下のHTMLコード。
<!DOCTYPE html> <html> <head></head> <body> <form action="#" method="post"> <table> <tbody> <tr> <th>text</th> <td><input type="text" name="f_text" /></td> </tr> <tr> <th>search</th> <td><input type="search" name="f_search" /></td> </tr> <tr> <th>tel</th> <td><input type="tel" name="f_tel" /></td> </tr> <tr> <th>url</th> <td><input type="url" name="f_url" /></td> </tr> <tr> <th>email</th> <td><input type="email" name="f_email" /></td> </tr> <tr> <th>datetime</th> <td><input type="datetime" name="f_datetime" /></td> </tr> <tr> <th>date</th> <td><input type="date" name="f_date" /></td> </tr> <tr> <th>month</th> <td><input type="month" name="f_month" /></td> </tr> <tr> <th>week</th> <td><input type="week" name="f_week" /></td> </tr> <tr> <th>time</th> <td><input type="time" name="f_time" /></td> </tr> <tr> <th>datetime-local</th> <td><input type="datetime-local" name="f_datetime-local" /></td> </tr> <tr> <th>number</th> <td><input type="number" name="f_number" /></td> </tr> <tr> <th>range</th> <td><input type="range" name="f_range" /></td> </tr> <tr> <th>color</th> <td><input type="color" name="f_color" /></td> </tr> </tbody> </table> <input type="submit" /> </form> </body> </html>
これを、ちゃんとWebサーバーを通して各ブラウザで表示させ、状況を見てみた。
サポートされているかどうかの判定は、type="text"
との挙動の違いがあるかどうか。なので、最初は適当にaaa
とか入力して、その場で怒られるものもあれば、submitボタンを押したときにバリデーションエラーを出すものもある。
サポート状況は大体こんな感じ。
Firefox | Chrome | Opera | Safari | IE 11 | Android | |
---|---|---|---|---|---|---|
text | ○ | ○ | ○ | ○ | ○ | ○ |
search | ○ | ○ | ○ | |||
tel | ○ | |||||
url | ○ | ○ | ○ | ○ | ○ | |
○ | ○ | ○ | ○ | ○ | ||
datetime | ○ | ○ | ||||
date | ○ | ○ | ○ | ○ | ||
month | ○ | ○ | ○ | ○ | ||
week | ○ | ○ | ○ | ○(*1) | ||
time | ○ | ○ | ○ | ○ | ||
datetime-local | ○ | ○ | ○ | ○ | ||
number | ○ | ○ | ○ | ○ | ○ | |
range | ○ | ○ | ○ | ○ | ○ | ○ |
color | ○ | ○ | ○ | ○ |
- (*1):それっぽく表示されるけど動作しなかった‥
‥酷いな‥画面キャプチャを貼り付けるのも面倒になるくらい酷い‥
もう、普通のテキストボックスで年月日を分けますよ、えぇ(謎)‥