記事の詳細
HTML5のtype属性を各ブラウザ(Chrome、Edge、Firefox、Safari)で比較してみました Part.1
月曜担当に戻ってまいりました、網干です。
今回は、HTMLのformタグで指定するinput要素で、HTML5で追加されたtype属性のブラウザごとの動きの違いを記載します。
今までは「ブラウザごとに違いがあるといっても、そんなに大きな違いはないのでは?」と思っていましたが、大間違いでした…。
フォームの部品は、あらかじめスタイルが決まっていたり、入力制限をしてくれたりと、便利で頼れる機能ではあるのですが、
全ブラウザが対応してるわけではないので、エンジニアの想定とは異なる動きをしてしまう場合があります。
従って、様々なブラウザで見られるようにするには注意が必要です。
[2016.9.19更新]
第2弾は”datetime”、”datetime-local”、”month”、”week”、”time”、”range”、”color”の7つの機能を各ブラウザで比較しました。
今回のブログの見出しはコチラです!
確認を行うブラウザの一覧
今回確認を行うブラウザは下記の4種類になります。
1. Google Chrome バージョン 53.0.2785.101 m (64-bit)
2. Microsoft Edge バージョン 25.10586.0.0
3. Firefox バージョン 48.0.2
4. Safari バージョン 5.1.7 (7534.57.2)
HTML5から追加されたtype属性一覧
今回は、HTML5から追加された下記のtype属性の確認を行います。
ブラウザごとに各type属性の表示を確認してみる
本当にブラウザごとに表示が違うのか…?
早速確認してみましょう!
(以下、実験用サイトにて表示確認をした画像になります)
・Google Chromeで表示すると…
・Microsoft Edgeで表示すると…
・Firefoxで表示すると…
・Safariで表示すると…
このように、同じtype属性を使っているにも関わらず、見た目が違うものが多くあります。
特に type=”range” に関しては見事に全てのブラウザでスタイルが一致していません。
アプリやソフトウェアの開発をしていると、説明書等のドキュメントを作成する際に、画面のスクリーンショットを張り付けて説明をすることが多いです。
上記のように、ブラウザで表示するサービスを開発した際に、ブラウザごとに見た目が異なってしまうと、PCを日常的に使わない、または、そもそもコンピュータになかなか触れないユーザーさんは画面の違いに戸惑ってしまいます。
なので、こういった部分はできる限り統一した作りにするように、注意しなければなりません。
…と、自分への戒めの言葉はここまでにして。
見た目に違いがあるのはわかったので、機能にはどのような違いがあるのか、見ていきましょう。
今回は”email”、”url”、”search”、”tel”、”number”、”date”の六つの機能を各ブラウザで見て比較します。
(後半の七つの機能は来週のブログに載せる予定です。)
type属性に”email”を指定した際の機能比較
1. GoogleChromeの場合
・テキスト内の入力が’文字列’ + ‘@’ + ‘文字列’の形式でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能
2. Microsoft Edgeの場合
・テキスト内の入力が’文字列’ + ‘@’ + ‘文字列’の形式でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能
3. Firefoxの場合
・テキスト内の入力が’文字列’ + ‘@’ + ‘文字列’の形式でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能
4. Safariの場合
type属性に”url”を指定した際の機能比較
1. GoogleChromeの場合
・テキスト内の入力が’http:’ + ‘文字列’の形式でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能
2. Microsoft Edgeの場合
・テキスト内の入力が’http:’から始まる文字列でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能
3. Firefoxの場合
・テキスト内の入力が’http:’から始まる文字列でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能
4. Safariの場合
type属性に”search”を指定した際の機能比較
GoogleChrome、Microsoft Edge、Firefox、Safariの場合
・どのような入力でも送信可能(※画像はGoogleChromeになります)
type属性に”tel”を指定した際の機能比較
GoogleChrome、Microsoft Edge、Firefox、Safariの場合
・どのような入力でも送信可能(※画像はGoogleChromeになります)
type属性に”number”を指定した際の機能比較
1. GoogleChromeの場合
・テキスト内には数値以外は入力不可
・増減ボタンで入力数値の増減が可能
※入力が空白の場合は送信可能
2. Microsoft Edgeの場合
・テキスト内には数値以外も入力可能
・テキスト内のクリアボタンで入力をクリアできる
・数値以外の入力がある場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能
3. Firefoxの場合
・テキスト内には数値以外も入力可能
・増減ボタンで入力数値の増減が可能
・数値以外の入力がある場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能
4. Safariの場合
・テキスト内には数値以外も入力可能
・数値以外を入力した場合は、マウスカーソルのフォーカスが移動した際にテキストボックスがクリアされる
・増減ボタンで入力数値の増減が可能
※入力が空白の場合は送信可能
type属性に”date”を指定した際の機能比較
1. GoogleChromeの場合
・テキスト内には数値以外は入力不可
・増減ボタンで入力数値の増減が可能
・テキスト内のクリアボタンで入力をクリアできる
・年、月、日の入力が一つでも欠けている場合は送信押下時にエラーが表示される。
・カレンダーを表示して年月日を設定することが可能
※入力が空白の場合は送信可能
2. Microsoft Edgeの場合
・テキスト内をクリックすると年月日を設定するウインドウが表示される
※入力が空白の場合は送信可能
3. Firefoxの場合
4. Safariの場合
・どのような入力でも送信可能
・増減ボタンをクリックすると年月日が入力されて値が増減する
今回はここまでになります。
最後に
いかがでしたか?
まだ六つしか紹介していませんが、ブラウザの違いで機能が大幅に違うものもありましたね!
入力の形式が変わってしまうと、フォームのデータを受信する側も、データの受け取り方を考えなければなりません。
また、データベースを使用する場合は、記録する際にデータの形式を統一する必要もありますね。
今回の続きは来週のブログで書きますので、またよろしくお願い致します。
ではまた!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。