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

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

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

今回は”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”）
ローカル日時（type=”datetime-local”）
月（type=”month”）
週（type=”week”）
時間（type=”time”）
レンジ（type=”range”）
色（type=”color”）

それでは早速、ブラウザごとに機能の違いを見ていきましょう！

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

1. GoogleChromeの場合

どんな入力でも送信可能

2. Microsoft Edgeの場合

どんな入力でも送信可能

3. Firefoxの場合

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

4. Safariの場合

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

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

1. GoogleChromeの場合

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

2. Microsoft Edgeの場合

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

3. Firefoxの場合

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

4. Safariの場合

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

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

1. GoogleChromeの場合

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

2. Microsoft Edgeの場合

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

3. Firefoxの場合

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

4. Safariの場合

・テキストボックスの増減ボタンで年、月が自動入力される
・どんな入力でも送信可能

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

1. GoogleChromeの場合

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

2. Microsoft Edgeの場合

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

3. Firefoxの場合

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

4. Safariの場合

・テキストボックスの増減ボタンで年、週が自動入力される
・どんな入力でも送信可能

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

1. GoogleChromeの場合

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

2. Microsoft Edgeの場合

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

3. Firefoxの場合

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

4. Safariの場合

・テキストボックスの増減ボタンで時、分が自動入力される
・どんな入力でも送信可能

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

1. GoogleChromeの場合

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

2. Microsoft Edgeの場合

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

3. Firefoxの場合

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

4. Safariの場合

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

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

1. GoogleChromeの場合

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

2. Microsoft Edgeの場合

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

3. Firefoxの場合

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

4. Safariの場合

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

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

最後に

いかがでしたか？

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

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

ではまた！