記事の詳細

プログラム解析やコーディング作業中に独り言が多くなるのが気になるお年頃になりました、網干です。
集中力が途切れてようやく独り言を発している事に気づきます…悪い癖です。

そんな私が独り言をフルに発揮して、コツコツ作ってきたクラウドアプリ、以前からちょくちょく情報を小出ししていた「SimpleOrder」の大幅アップデートを行いました!
以前は順番待ち特化のシステムでしたが、いくつかの機能追加とデザインの変更で、カスタマイズ次第ではミニホームページが完成するシステムになりました!
「SimpleOrder」は0円から使えますので、ぜひお試しください!
無料で使えるシンプルな順番待ち・受付管理アプリ simple order
シンプルな順番待ちアプリシンプルオーダー

さて、今回のブログ内容ですが。
前回に引き続き、HTMLのformタグで指定するinput要素で、HTML5で追加されたtype属性のブラウザごとの動きの違いを記載します。
前回は”email”、”url”、”search”、”tel”、”number”、”date”の六つの機能を各ブラウザで見て比較しました。
前回の記事はこちら:

HTML5のtype属性を各ブラウザ(Chrome、Edge、Firefox、Safari)で比較してみました Part.1
月曜担当に戻ってまいりました、網干です。今回は、HTMLのformタグで指定するinput要素で、HTML5で追加されたtype属性のブラウザごとの動きの違いを記載します。今まで...

今回は”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属性に”datetime”を指定した際の機能比較

1. GoogleChromeの場合

どんな入力でも送信可能
Google Chromeでdatetimeを表示した場合

2. Microsoft Edgeの場合

どんな入力でも送信可能
Microsoft Edgeでdatetimeを表示した場合

3. Firefoxの場合

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

4. Safariの場合

・テキストボックスの増減ボタンで年、月、日、時、分が自動入力される
・どんな入力でも送信可能
Safariでdatetimeを表示した場合

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

1. GoogleChromeの場合

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

2. Microsoft Edgeの場合

・テキスト内の日付部分をクリックすると年、月、日を設定するウインドウが表示される
・テキスト内の時間部分をクリックすると時、分を設定するウインドウが表示される
・どちらか片方が空白でも送信可能
※入力が空白の場合は送信可能
Microsoft Edgeでdatetime-localを表示した場合1
Microsoft Edgeでdatetime-localを表示した場合2

3. Firefoxの場合

・どんな入力でも送信可能
Firefoxでdatetime-localを表示した場合

4. Safariの場合

・テキストボックスの増減ボタンで年、月、日、時、分が自動入力される
・どんな入力でも送信可能
Safariでdatetime-localを表示した場合

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

1. GoogleChromeの場合

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

2. Microsoft Edgeの場合

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

3. Firefoxの場合

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

4. Safariの場合

・テキストボックスの増減ボタンで年、月が自動入力される
・どんな入力でも送信可能
Safariでmonthを表示した場合

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

1. GoogleChromeの場合

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

2. Microsoft Edgeの場合

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

3. Firefoxの場合

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

4. Safariの場合

・テキストボックスの増減ボタンで年、週が自動入力される
・どんな入力でも送信可能
Safariでweekを表示した場合

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

1. GoogleChromeの場合

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

2. Microsoft Edgeの場合

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

3. Firefoxの場合

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

4. Safariの場合

・テキストボックスの増減ボタンで時、分が自動入力される
・どんな入力でも送信可能
Safariでtimeを表示した場合

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

1. GoogleChromeの場合

・レンジバーが表示され、左右に調整することで数値を増減させる
Google Chromeでrangeを表示した場合

2. Microsoft Edgeの場合

・レンジバーが表示され、左右に調整することで数値を増減させる
・レンジバーの移動中は数値が表示される
Microsoft Edgeでrangeを表示した場合

3. Firefoxの場合

・レンジバーが表示され、左右に調整することで数値を増減させる
Firefoxでrangeを表示した場合

4. Safariの場合

・レンジバーが表示され、左右に調整することで数値を増減させる
Safariでrangeを表示した場合

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

1. GoogleChromeの場合

・カラー選択の入力欄が表示され、クリックすると別ウインドウで色の設定が可能
Google Chromeでcolorを表示した場合

2. Microsoft Edgeの場合

・カラー選択の入力欄が表示され、クリックすると別ウインドウで色の設定が可能
Microsoft Edgeでcolorを表示した場合

3. Firefoxの場合

・カラー選択の入力欄が表示され、クリックすると別ウインドウで色の設定が可能
Firefoxでcolorを表示した場合

4. Safariの場合

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

以上で、HTML5から追加されたtype属性の各ブラウザでの比較は終了です。

最後に

いかがでしたか?

Part.1の記事も通して見ていただければわかりますが、ブラウザごとに見た目も機能も大きく異なっています。
そのため、どれか一つだけをカバーするだけではお客様が使うシステムとしては不十分になってしまいます。
ブラウザ上で表示するシステムを開発する際には注意しなければなりませんね。

今回は、SimpleOrderの作成途中でtype属性の”color”で問題が発覚したため、今回のような調査を行うキッカケを得ることができました。
私が作成したシステムで、私の知らないところで不十分な機能あるかもしれないのは非常に恐ろしいですね…。
ですが、失敗は非常に貴重な経験となりますので、しっかりと理解して次に活かしていきましょう!

ではまた!

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

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

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

網干 裕介

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

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

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

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

特集

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

AD

ページ上部へ戻る