読者です 読者をやめる 読者になる 読者になる

HHeLiBeXの日記 正道編

日々の記憶の記録とメモ‥

HTML5のinputタグにおけるtype属性のサポート状況

ブラウザ標準の機能でカレンダーコンポーネントを使ったコードを書きたくて、ついでに単純なHTMLを書いて検証してみた。

試したのは以下のブラウザ。

書いたのは以下の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
email
datetime
date
month
week ○(*1)
time
datetime-local
number
range
color
  • (*1):それっぽく表示されるけど動作しなかった‥

‥酷いな‥画面キャプチャを貼り付けるのも面倒になるくらい酷い‥

もう、普通のテキストボックスで年月日を分けますよ、えぇ(謎)‥