time

input要素のtype属性にtimeを指定すると、時間入力欄になる。

ブラウザ対応

構文

<input type="time">

時間入力欄は、hh:mm:ssもしくはhh:mmの形式の時間を入力する入力欄。時間入力欄に対応しているブラウザであれば、時間入力用のUI（ユーザーインターフェース）が現れる。

hh:mm:ss

hhは時間、mmは分、ssは秒を意味する。

24時間表記で指定する。

例： 01:22:33（1時22分33秒）、12:34:56（12時34分56秒）、15:00（15時0分0秒）。

属性

属性 説明
autocomplete属性 オートコンプリートを有効にするかどうかを指定する属性。
autofocus属性 オートフォーカスさせる属性。
disabled属性 無効にする属性。
form属性 属するform要素のid属性値を指定する属性。
list属性 入力候補を示すdatalist要素（データリスト）のid属性値を指定する属性。
max属性 最大値を指定する属性。時間入力欄においては、max属性に指定した時間より後の時間は入力できなくなる。
min属性 最小値を指定する属性。時間入力欄においては、min属性に指定した時間より前の時間は入力できなくなる。
name属性 名前を指定する属性。
readonly属性 読み取り専用にする属性。
required属性 入力を必須にする属性。
step属性 入力可能な数値の間隔を指定する属性。時間入力欄においては、入力可能な時間の間隔となる。時間入力欄における初期設定値は60。
value属性 値を指定する属性。時間入力欄においては、初期入力値となる。

サンプルコード

時間入力欄： <input type="time" name="sampleName">

入力できる時間の範囲を指定

<input type="time" min="08:00" max="12:34" name="sampleName">

8時～12時34分までの間の時間を入力できる。

入力可能な時間の間隔を指定

<input type="time" step="30" name="sampleName">

30秒間隔で時間を入力できる。

初期入力値を指定

<input type="time" value="12:34" name="sampleName">

サンプル

シンプルな時間入力フォーム

HTMLソースコード
<form action="sample-input-type.php" method="post" target="_blank">
	<p>
		<label>
			時間入力欄：
			<input type="time" name="sampleName">
		</label>
	</p>
	<p>
		<input type="submit">
	</p>
</form>
実際の表示

特定範囲の時間入力欄

HTMLソースコード
<form action="sample-input-type.php" method="post" target="_blank">
	<p>
		<label>
			時間入力欄：
			<input type="time" name="sampleName" min="02:00" max="13:32">
		</label>
	</p>
	<p>
		<input type="submit">
	</p>
</form>
実際の表示

15分間隔で指定できる時間入力欄

HTMLソースコード
<form action="sample-input-type.php" method="post" target="_blank">
	<p>
		<label>
			時間入力欄：
			<input type="time" name="sampleName" step="900">
		</label>
	</p>
	<p>
		<input type="submit">
	</p>
</form>
実際の表示