[4] HTML の input 要素の type 属性を time とすると、 時刻を指定するフォーム制御子となります。

ここで指定できる時刻には、 日付や時間帯の情報は含まれません。ここで指定できるのは1日の中の時刻であり、 時間の長さではありません。

[5] 仕様書:

値

構文

[6] DOM 内やフォーム提出時に用いられる値は、 ISO 8601 のプロファイルであり、 次のような構文を有します。

  • 時: 2桁の数字 (0〜9)
  • :
  • 分: 2桁の数字
  • 省略可能:
    • :
    • 秒: 2桁の数字 (既定値は 0)
    • 省略可能:
      • .
      • 秒以下: 1桁以上の数字 (既定値は零)

数は十進数としなければなりません。 必要なら零埋めしなければなりません。

WF2 2.4

暦

[14] 時刻は0以上24時間以下としなければなりません。 WF2 2.4

[3] 閏秒に関しては、 datetime の項を参照してください。

例

[7] 23:59:00.00000 WF2 2.4

[3] 00:00:05 WF2 2.4

メモ

[16] 零点は、 00:00 です。 WF2 2.4.2

属性との関係

[8] step 属性は秒単位の精度を表します。 既定値は 60 (1分) です。 WF2 2.4

レンダリング

[9] 利用者エージェントは適切な widget、 例えば時計を使うことが期待されます。 WF2 2.4

[15] 利用者エージェントは、利用者に対し、 時間帯の情報が含まれないことを明らかにするべきです。 WF2 2.4

[21] 時刻は、12時間制や24時間制で表示されるのが普通です。 理屈の上では30時間制やその他の時刻制度で表示することもできるのですが、 実際にそのような表示をする利用者エージェントの存在は確認されていません。

[22] 夜間の時間帯を選択させるような場合は30時間制で表示してくれる方が嬉しかったりするんですが。

互換性

[13] 未対応利用者エージェントとの互換性

month に対応していない利用者エージェントは、 text (単一行文章入力制御子) として扱います。従って、利用者は任意の文字列を入力することができます。

ですから、著者は、対応している利用者エージェントが一般的になるまでの間、 フォーム制御子の近くで記入方法を説明しておくのがよいでしょう。 フォーム処理エージェントは記入された値が適当か検査するべきです (これは安全性の観点からも重要です)。

歴史

[10] この input type は Web Forms 2.0 で導入されました。

実装

[11] Opera 9 が実装しています。

関連

[12] input type として、日付のための date、 日付と時刻のための datetime や datetime-local などがあります。

メモ

[61] (X)HTML5 Tracking ( 版) http://html5.org/tools/web-apps-tracker?from=2433&to=2434

[62] IRC logs: freenode / #whatwg / 20090909 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20090909#l-714

[63] IRC logs: freenode / #whatwg / 20100413 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20100413#l-70

[64] IRC logs: freenode / #whatwg / 20100820 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20100820#l-218

[65] Web Applications 1.0 r5406 note that japan styles year and year-month specially, so that we can support that, once we've proved that this actually gets used at all ( ( 版)) http://html5.org/tools/web-apps-tracker?from=5405&to=5406

[66] Web Applications 1.0 r8203 Allow type=time to have min>max, so that times can span midnight. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8202&to=8203

[1] Chrome は、

[2] iOS の Safari は対応しているけど Mac の Safari は対応していないらしい。 おかしいだろ...

[17] iOS の Safari は step 属性に未対応で、常に分単位でしか指定できないらしい。

[18] iOS の Safari は実は DOM レベルでは step 属性に対応しているようです。 step IDL属性は仕様通りに動作するようですし、 stepUp メソッドや stepDown メソッドも step 属性の指定通りに動きます。 step 属性が省略されたときに step=60 相当になるのも仕様通り。

ところが UI 側はこれにまったく影響されず、常に step=60 相当の表示と編集しかできません。 DOM 側からそのことを知るのは困難。

[19] 仕様書と Chrome と Firefox では、 値が step の整数倍になっていないとき、 stepUp/stepDown で近い整数倍の値になります、 iOS の Safari ではそうではなく、 step 分加算されるだけです。 Mac OS X の Safari は不明。

[20] Windows の Chrome では、 ミリ秒単位まで編集できます。 step に対して不適切な値が指定されたときでも、 初期状態ではミリ秒単位で指定された値が表示されます。 編集すると step を考慮した値になります。

step=any にしていると、 指定されている値に端数がなければ、 時と分しか表示されない状態になります。 UI から秒とそれ以下を編集できる状態にする方法がなさそうです。

step に関わらず、 ミリ秒より小さな値は編集された時点で失われます。

[23] New WebKit Features in Safari 14.1 | WebKit () https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/

[24] Windows の Chrome で表示される時刻選択ウィジェットの選択肢リストは、 選択中の値の前後7つしか表示されなくて (スクロールバーなどもなく) マウス操作でそれ以外に変更できません。 (キーボード操作ならそれ以外にも変更できるのですが、 キーボードが使えるなら選択肢リストを開かずに直接テキストボックスに数字を書けばいいので、 意味不明。。。)