HTML5タグ虎の巻

input type="time"タグ

HTML5

input type="time"は、時刻入力欄を作成するタグです。

解説

input type="time"を使うと、正しい時刻しか入力できなくなるため、入力チェック等の処理を行わなくても正しい時刻値であることが保証されます。

しかし、HTML5に対応していないブラウザでは使用できないため注意が必要です。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
フロー・コンテンツ
フレージング・コンテンツ
インタラクティブ・コンテンツ
コンテキスト
(親カテゴリ)
フレージング・コンテンツを許可する場所
コンテンツ・モデル
(子カテゴリ)
なし

属性

input(type="time")タグには以下の属性が指定できます。

【属性】
属性説明
name名前を指定する(submit時にこの名前で送信される)
(例)name="tm01"
value値を指定する
(例)value="10:20:30"
min入力を許可する最小値を指定する
(例)min="10:00:00"
max入力を許可する最大値を指定する
(例)max="20:00:00"
stepステップ値を指定する(秒単位)
(例)step="30"
 ※ステップ値とは値の刻みです。5だと 5、10、15… が入力可能です。
readonly読取専用にする
(例)readonly="readonly"
 ※readonlyのみでもOKです。
required必須入力であることを指定する
(例)required="required"
 ※requiredのみでもOKです。
【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーによる移動の順番を指定する
 正数:指定した数値の順にフォーカス移動される
 負数:フォーカスは可能だが、タブ移動時はフォーカス対象とならない
(例)tabindex="10"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

時刻入力欄(時分)を作成する(初期値:23:59)

<input type="time" name="tm01" value="23:59">

hh:mm 形式にすると秒は省略されます。

時刻入力欄(時分秒)を作成する(初期値:23:59:59)

<input type="time" name="tm02" value="23:59:59">

時刻入力欄を作成する(入力可能範囲:10:00~12:30)

<input type="time" name="tm03" min="10:00" max="12:30">

▲、▼ボタンを押すと、指定範囲を超える時刻へは増減しません。
手入力すると入力できてしまいますが、submit時にチェックがかかります。

時刻入力欄を作成する(ステップ:30秒)

<input type="time" name="tm04" value="08:00" step="30">

秒単位で指定します。(例:5分の場合は300)step値のチェックはsubmit時に行われます。

時刻入力欄を作成する(必須)

<input type="time" name="tm05" required="required">

未入力だと、submit時に必須チェックがかかります。

備考

  • value値のフォーマットは、hh:mm:ssです。(例:23時59分59秒 ⇒ "23:59:59")
  • ssは省略可です。(省略した場合の秒数は0になります)
  • input(type="time")は、HTML5から新たに追加になったタグです。

関連項目