記事の詳細

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

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

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

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

20160919_icat_editHTML5の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で表示すると…

googlechrome_image1

Microsoft Edgeで表示すると…

microsoftedge_image1

Firefoxで表示すると…

firefox_image1

Safariで表示すると…

safari_image1

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

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

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

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

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

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

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

1. GoogleChromeの場合

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

2. Microsoft Edgeの場合

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

3. Firefoxの場合

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

4. Safariの場合

・どんな入力でも送信可能
safari_image2

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

1. GoogleChromeの場合

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

2. Microsoft Edgeの場合

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

3. Firefoxの場合

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

4. Safariの場合

・どんな入力でも送信可能
safari_image3

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

GoogleChrome、Microsoft Edge、Firefox、Safariの場合

・どのような入力でも送信可能(※画像はGoogleChromeになります)
googlechrome_image4

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

GoogleChrome、Microsoft Edge、Firefox、Safariの場合

・どのような入力でも送信可能(※画像はGoogleChromeになります)
googlechrome_image5

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

1. GoogleChromeの場合

・テキスト内には数値以外は入力不可
・増減ボタンで入力数値の増減が可能
※入力が空白の場合は送信可能
googlechrome_image6

2. Microsoft Edgeの場合

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

3. Firefoxの場合

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

4. Safariの場合

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

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

1. GoogleChromeの場合

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

2. Microsoft Edgeの場合

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

3. Firefoxの場合

・どのような入力でも送信可能
firefox_image7

4. Safariの場合

・どのような入力でも送信可能
・増減ボタンをクリックすると年月日が入力されて値が増減する
safari_image7

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

最後に

いかがでしたか?

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

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

ではまた!

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

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

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

網干 裕介

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

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

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

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

特集

エクセルトラブルと解決策のまとめ アクセス数を増加させるための方法まとめ 初心者向けWordPressの設定方法まとめ

AD

お知らせ

平成28年度補正予算 小規模事業者持続化補助金
ページ上部へ戻る