記事の詳細

月曜担当に戻ってまいりました、網干です。

今回は、HTMLのformタグで指定するinput要素で、HTML5で追加されたtype属性のブラウザごとの動きの違いを記載します。
今までは「ブラウザごとに違いがあるといっても、そんなに大きな違いはないのでは?」と思っていましたが、大間違いでした…。

フォームの部品は、あらかじめスタイルが決まっていたり、入力制限をしてくれたりと、便利で頼れる機能ではあるのですが、
全ブラウザが対応してるわけではないので、エンジニアの想定とは異なる動きをしてしまう場合があります。
従って、様々なブラウザで見られるようにするには注意が必要です。

[2016.9.19更新]
第2弾は”datetime”、”datetime-local”、”month”、”week”、”time”、”range”、”color”の7つの機能を各ブラウザで比較しました。

HTML5のtype属性を各ブラウザ(Chrome、Edge、Firefox、Safari)で比較してみました Part.2
プログラム解析やコーディング作業中に独り言が多くなるのが気になるお年頃になりました、網干です。集中力が途切れてようやく独り言を発している事に気づきます…悪い癖...

確認を行うブラウザの一覧

今回確認を行うブラウザは下記の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指定フォーム部品送信ボタン

ブラウザごとに各type属性の表示を確認してみる

本当にブラウザごとに表示が違うのか…?
早速確認してみましょう!
(以下、実験用サイトにて表示確認をした画像になります)

Google Chromeで表示すると…

Google Chromeで表示した場合

Microsoft Edgeで表示すると…

Microsoft Edgeで表示した場合

Firefoxで表示すると…

Firefoxで表示した場合

Safariで表示すると…

Safariで表示した場合

このように、同じtype属性を使っているにも関わらず、見た目が違うものが多くあります。
特に type=”range” に関しては見事に全てのブラウザでスタイルが一致していません。

アプリやソフトウェアの開発をしていると、説明書等のドキュメントを作成する際に、画面のスクリーンショットを張り付けて説明をすることが多いです。
上記のように、ブラウザで表示するサービスを開発した際に、ブラウザごとに見た目が異なってしまうと、PCを日常的に使わない、または、そもそもコンピュータになかなか触れないユーザーさんは画面の違いに戸惑ってしまいます。

なので、こういった部分はできる限り統一した作りにするように、注意しなければなりません。

…と、自分への戒めの言葉はここまでにして。

見た目に違いがあるのはわかったので、機能にはどのような違いがあるのか、見ていきましょう。

今回は”email”、”url”、”search”、”tel”、”number”、”date”の六つの機能を各ブラウザで見て比較します。
(後半の七つの機能は来週のブログに載せる予定です。)

type属性に”email”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内の入力が’文字列’ + ‘@’ + ‘文字列’の形式でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能
Google Chromeでemailを表示した場合

2. Microsoft Edgeの場合

・テキスト内の入力が’文字列’ + ‘@’ + ‘文字列’の形式でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能
Microsoft Edgeでemailを表示した場合

3. Firefoxの場合

・テキスト内の入力が’文字列’ + ‘@’ + ‘文字列’の形式でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能
Firefoxでemailを表示した場合

4. Safariの場合

・どんな入力でも送信可能
Safariでemailを表示した場合

type属性に”url”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内の入力が’http:’ + ‘文字列’の形式でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能
Google Chromeでurlを表示した場合

2. Microsoft Edgeの場合

・テキスト内の入力が’http:’から始まる文字列でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能
Microsoft Edgeでurlを表示した場合

3. Firefoxの場合

・テキスト内の入力が’http:’から始まる文字列でない場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能
Firefoxでurlを表示した場合

4. Safariの場合

・どんな入力でも送信可能
Safariでurlを表示した場合

type属性に”search”を指定した際の機能比較

GoogleChrome、Microsoft Edge、Firefox、Safariの場合

・どのような入力でも送信可能(※画像はGoogleChromeになります)
Google Chromeでsearchを表示した場合

type属性に”tel”を指定した際の機能比較

GoogleChrome、Microsoft Edge、Firefox、Safariの場合

・どのような入力でも送信可能(※画像はGoogleChromeになります)
Google Chromeでtelを表示した場合

type属性に”number”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内には数値以外は入力不可
・増減ボタンで入力数値の増減が可能
※入力が空白の場合は送信可能
Google Chromeでnumberを表示した場合

2. Microsoft Edgeの場合

・テキスト内には数値以外も入力可能
・テキスト内のクリアボタンで入力をクリアできる
・数値以外の入力がある場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能
Microsoft Edgeでnumberを表示した場合

3. Firefoxの場合

・テキスト内には数値以外も入力可能
・増減ボタンで入力数値の増減が可能
・数値以外の入力がある場合は送信押下時にエラーが表示される。
※入力が空白の場合は送信可能
Firefoxでnumberを表示した場合

4. Safariの場合

・テキスト内には数値以外も入力可能
・数値以外を入力した場合は、マウスカーソルのフォーカスが移動した際にテキストボックスがクリアされる
・増減ボタンで入力数値の増減が可能
※入力が空白の場合は送信可能
Safariでnumberを表示した場合

type属性に”date”を指定した際の機能比較

1. GoogleChromeの場合

・テキスト内には数値以外は入力不可
・増減ボタンで入力数値の増減が可能
・テキスト内のクリアボタンで入力をクリアできる
・年、月、日の入力が一つでも欠けている場合は送信押下時にエラーが表示される。
・カレンダーを表示して年月日を設定することが可能
※入力が空白の場合は送信可能
Google Chromeでdateを表示した場合

2. Microsoft Edgeの場合

・テキスト内をクリックすると年月日を設定するウインドウが表示される
※入力が空白の場合は送信可能
Microsoft Edgeでdateを表示した場合

3. Firefoxの場合

・どのような入力でも送信可能
Firefoxでdateを表示した場合

4. Safariの場合

・どのような入力でも送信可能
・増減ボタンをクリックすると年月日が入力されて値が増減する
Safariでdateを表示した場合

今回はここまでになります。

最後に

いかがでしたか?

まだ六つしか紹介していませんが、ブラウザの違いで機能が大幅に違うものもありましたね!
入力の形式が変わってしまうと、フォームのデータを受信する側も、データの受け取り方を考えなければなりません。
また、データベースを使用する場合は、記録する際にデータの形式を統一する必要もありますね。

今回の続きは来週のブログで書きますので、またよろしくお願い致します。

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

コーダーの網干裕介(あぼしゆうすけ)と申します。webサイトは見た目が非常に重要なのですが、サイトを構成するソースコードも見た目が重要だと考えています。内も外も魅力的なコンテンツが作れる人物になれるよう、日々努力しています。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る