<input type="time">
ブラウザ |
|
---|---|
分類 | フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素(リスト化、サブミット可能、リセット可能、再関連付け可能、ラベル付け可能) / パルパブル・コンテンツ |
利用場所 | フレージング・コンテンツが置ける場所 |
内容 | 空 |
input要素に type="time"
を指定すると、時間の入力欄を作成できます。
<input type="time" name="example1">
<input type="time" name="example2" value="20:40">
属性 | 値 | ||
---|---|---|---|
任意属性(共通) | |||
type="" |
部品のタイプ | time |
時間の入力欄 |
name="" |
部品の名前 | 文字列 | 部品を識別するための名前 |
value="" |
送信される値 | 時間 | 入力欄の初期値 (書式: hh:mm:ss ) |
disabled |
部品の無効化 | (disabled ) |
値は省略可能 |
form="" |
![]() |
ID名 | 関連付けるform要素に指定したID名 |
autofocus |
![]() |
(autofocus ) |
値は省略可能、1つの文書に1つだけ指定可能 |
任意属性 | |||
min="" |
![]() |
時間 | 最小値 (書式: hh:mm:ss ) |
max="" |
![]() |
時間 | 最大値 (書式: hh:mm:ss ) |
step="" |
![]() |
秒数 | この値の間隔で入力を可能にする (初期値は 60 ) |
any |
ステップを設定しない |
autocomplete="" |
![]() |
on |
オートコンプリートを有効にする |
off |
オートコンプリートを無効にする | ||
list="" |
![]() |
ID名 | 関連付けるdatalist要素に指定したID名 |
readonly |
読み取り専用 | (readonly ) |
値は省略可能 |
required |
![]() |
(required ) |
値は省略可能 |
type属性、name属性、value属性、disabled属性、form属性、autofocus属性の詳細については、input要素のページを参考にしてください。
このタイプの特徴
時間を入力するための入力欄です。
(実際の表示例)
このタイプに対応しているブラウザでは、スピナー(上下ボタン)を使って時間を入力することができます。
時間の書式
入力する時間、及びvalue属性、min属性、max属性の値は、次の書式で記述する必要があります。
hh:mm:ss
20:40:30
- 時・分・秒を各2桁で入力します。(24時間表記)
- 0秒ジャストの場合は秒数(
:ss
)を省略することもできます。 - 小数点以下の秒数も入力することができます。(ピリオド(
.
)に続けて1~3桁で記述します)
<input type="time" name="example" value="20:40">
秒数単位の入力を求める場合は、step属性の値に 1
などを指定しておきます。(初期値が 60
秒なので)
<input type="time" name="example" step="1" value="20:40:30">
min属性とmax属性について
min属性とmax属性は、入力できる時間の範囲を指定します。(どちらかのみを指定することも可能です)
- min属性 … 入力できる時間の最小値を指定します。
- max属性 … 入力できる時間の最大値を指定します。
次の例では、午前の時間のみが入力可能となります。
<input type="time" name="example" min="00:00" max="11:59">
step属性について
step属性は、入力できる時間のステップ(入力値の間隔)を秒数で指定します。type="time"
の場合は 60
秒が初期値となります。
次の例では
を指定しているので、5分間隔で入力できることになります。(例:5分、10分、15分 ...)300
<input type="time" name="example" step="300">
秒間隔で入力を可能にする場合は、次のように
などを指定します。(対応しているブラウザでは、入力欄の桁数も変化します)1
<input type="time" name="example" step="1">
値に any
を指定すると、ステップは設定されません。
<input type="time" name="example" step="any">
autocomplete属性について
autocomplete属性は、オートコンプリート機能(入力内容の自動補完)を使うかどうかを指定します。
値には on
(使う)または off
(使わない)を指定します。この属性を省略した場合は、form要素の設定内容が使用されます。(form要素にも指定されていない場合は on
の状態がデフォルトとなります)
<input type="time" name="example" autocomplete="off">
- HTML 5.1では、input要素のautocomplete属性に
on
/off
以外の値も指定できるようになりました(詳しくは仕様書をご覧ください)。これにより、きめ細やかな設定が行えるようになります。
list属性について
list属性は、入力候補リストの表示を指定します。この属性を使用する場合は、datalist要素で入力候補のリストを作成しておく必要があります。
値には、datalist要素に指定したID名を記述します。(datalist要素は、form要素の外に配置することも可能です)
<input type="time" name="example" list="data1">
<datalist id="data1">
<option value="01:00"></option>
<option value="02:00"></option>
<option value="03:00"></option>
</datalist>
- この属性を指定した場合、Chrome(55)ではリストの選択とスピナーによる入力が同時に行えます(2種類の操作ボタンが表示される)。また、Opera(12)ではスピナーによる入力が優先されます(この属性で指定したリストが表示されない)。
readonly属性について
readonly属性は、そのフォーム部品が読み取り専用であることを指定します。
この属性が指定された部品は、書き換えだけができなくなります。選択することは可能で、データも送信されることになります。
<input type="time" name="example" readonly>
- この属性が指定されたフォーム部品は、妥当性のチェックから除外されます。
required属性について
required属性は、そのフォーム部品が入力必須であることを指定します。
<input type="time" name="example" required>
使用例
<p><input type="time" name="example" min="08:00" max="08:59" value="08:00"></p>
- 表示例
- 対応しているブラウザでは、8時台の時間しか選択できなくなります。
<p>デフォルト:<input type="time" name="example1"> (1分)</p>
<p>0.1秒を指定:<input type="time" name="example2" step="0.1"></p>
<p>1秒を指定:<input type="time" name="example3" step="1"></p>
<p>300秒を指定:<input type="time" name="example4" step="300"> (5分)</p>
<p>1800秒を指定:<input type="time" name="example5" step="1800"> (30分)</p>
<p>3600秒を指定:<input type="time" name="example6" step="3600"> (1時間)</p>
- 表示例
-
デフォルト: (1分)
0.1秒を指定:
1秒を指定:
300秒を指定: (5分)
1800秒を指定: (30分)
3600秒を指定: (1時間)
- 時間のスピナーを操作すると、指定した間隔で時間が変化します(対応しているブラウザのみ)。
- Chrome(55)では、変更したい箇所をクリック(選択)したあとにスピナーを操作します。
- 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。
<form method="get" action="input_time.html">
<p><input type="time" name="example" required> <strong>必須</strong></p>
<p><input type="submit" value="送信する"></p>
</form>
- 表示例
- 対応しているブラウザでは、送信時に入力内容の妥当性がチェックされ、不備があればエラーメッセージが表示されます。
- Chrome(55)では、変更したい箇所をクリック(選択)したあとにスピナーを操作します。