HTMLで時間を表示させるには？

HTMLでフォームに現在時刻を入力したい場合、どのように実装すれば良いのでしょうか？本記事では、HTMLのinputタグを用いて時間を表示する方法、そして時刻の初期値、表示範囲を指定する方法について解説します。

inputタグで時間入力欄を作る

HTMLで時間を入力できるフォームを作成するには、タグを使用します。タグのtype属性に"time"を指定することで、時間を入力するためのフォームを作成できます。


<input type="time" name="time-input">

上記コードを実行すると、ブラウザ上に時間を選択できる入力欄が表示されます。

時間入力欄に初期値を設定したい場合は、タグのvalue属性に設定したい時間を指定します。時間の形式は"HH:MM"で指定します。


<input type="time" name="time-input" value="09:00">

上記コードの場合、時間入力欄には初期値として"09:00"が表示されます。

時間入力欄に表示できる時刻の範囲を制限したい場合は、タグのmin属性とmax属性を使用します。 * **min属性:** 指定した時刻以降の時刻のみ選択可能になります。 * **max属性:** 指定した時刻以前の時刻のみ選択可能になります。


<input type="time" name="time-input" min="09:00" max="17:00">

上記コードの場合、時間入力欄は"09:00"から"17:00"までの時刻のみ選択可能になります。

時間入力欄で利用できる主な属性を以下の表にまとめました。

属性名	説明
type	入力欄のタイプを指定します。時間入力欄の場合は"time"を指定します。
name	入力欄の名前を指定します。フォーム送信時にデータと紐付けるために使用します。
value	入力欄の初期値を指定します。時間の形式は"HH:MM"です。
min	選択可能な最小時刻を指定します。時間の形式は"HH:MM"です。
max	選択可能な最大時刻を指定します。時間の形式は"HH:MM"です。
required	入力を必須にするかどうかを指定します。
disabled	入力欄を無効にするかどうかを指定します。

* [HTML input type="time" 属性](https://www.w3schools.com/tags/att_input_time.asp) (外部サイト)

Q: 時間入力欄に秒まで表示することはできますか？

A: いいえ、HTMLの標準機能では時間入力欄に秒まで表示することはできません。秒まで入力したい場合は、JavaScriptなどを利用する必要があります。
Q: 時間入力欄の見た目を変更することはできますか？

A: はい、CSSを使用して時間入力欄の見た目を変更することができます。ただし、ブラウザによってサポートされているスタイルが異なる場合があるので注意が必要です。
Q: 入力された時刻データはどのようにサーバーに送信されますか？

A: 入力された時刻データは、フォームが送信されるときに他のフォームデータと一緒にサーバーに送信されます。送信方法は、GETメソッドまたはPOSTメソッドのいずれかを選択できます。

その他の参考記事:jquery 時間指定