<input type="time">
time
类型的<input>元素 创建输入字段，允许轻松输入时间。
控件的用户界面从浏览器到浏览器有所不同，跨浏览器支持在现代浏览器中通常是很好的，只有Safari在编写本文时不支持它。在Safari中，控件会优雅地降低到简单
<input type="text">
。
<input id="time" type="time">
在Chrome / Opera中，
time
控件非常简单，可以插入小时和分钟（24小时制）的插槽，上下箭头可以迭代显示的值，使用十字按钮清空控件。
Firefox的
time
控制非常相似，只是它没有上下箭头，并且是12小时的时钟（有一个额外的插槽来指定AM或PM）。
边缘
time
控制更精细一点，打开滑动卷轴（也是24小时）的小时和分钟选择器：
|
值 |
表示时间的DOMString，或者空的。 |
|---|---|
|
活动 |
change 和 input. |
|
支持的通用属性 |
autocomplete, list, readonly, and step. |
|
IDL属性 |
value, valueAsDate, valueAsNumber, list. |
|
方法 |
select（），stepDown（），stepUp（） |
值
DOMString
表示输入到输入中的时间的值。您可以通过在
value
属性中包含日期来为输入设置默认值，如下所示：
<label for="appt-time">Choose an appointment time: </label>
<input id="appt-time" type="time" name="appt-time" value="13:30">
需要注意的是，显示的时间格式可能与实际情况有所不同
value
- 显示的时间格式将根据用户操作系统的设置区域设置进行选择，而日期
value
始终格式化
hh:mm
。当上述值提交给服务器时，例如某些浏览器显示为
13:30
，有些显示为
1.30 PM
，但提交的值总是看起来像
appt-time=13%3A30
。
您还可以使用
HTMLInputElement.value
属性在JavaScript中获取和设置日期值，例如：
var timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';使用时间输入
时间输入乍看起来很方便 - 它们为选择时间提供了一个简单的用户界面，并且将发送到服务器的数据格式规范化，而不管用户的区域设置如何。但是，
<input type="time">
由于所有浏览器都无法保证浏览器的支持，因此存在一些问题。
我们将考虑基本的和更复杂的用途
<input type="time">
，然后就减轻浏览器支持问题提供建议（请参阅处理浏览器支持）。
时间的基本用法
最简单的使用
<input type="time">
涉及基本
<input>
和
<label>
元素组合，如下所示：
<form>
<label for="appt-time">Choose an appointment time: </label>
<input id="appt-time" type="time" name="appt-time">
</form>控制输入大小
<input type="time">
不支持表单大小属性，如
size
。你将不得不求助于
CSS
的大小需求。
使用步骤属性
您可以使用该
step
属性来改变时间递增的时间量。但是，这在浏览器中有一些奇怪的效果，所以不完全可靠。
它需要一个整数值，等于你想增加的秒数。如果您选择小于60秒（1分钟）的值，则会导致
time
输入在小时和分钟旁边显示一个秒输入区域：
<form>
<label for="appt-time">Choose an appointment time: </label>
<input id="appt-time" type="time" name="appt-time" step="2">
</form>但是，这似乎只对Chrome / Opera有效果，Chrome / Opera是唯一显示向上/向下迭代箭头的浏览器 - 点击这些会导致秒的值每次迭代两秒，但是对于小时或分钟（如果你想迭代的分钟或小时，你需要相当于这些值的适当的倍数，例如120 2分钟，或7200 2小时）。
这些步骤的值在Firefox或Edge中似乎没有效果。另外，它似乎会导致验证无法正常工作（如下一节所述）。
验证
默认情况下，
<input type="time">
不对输入的值应用任何验证。UI实现通常不会让你输入任何不是日期时间的东西 - 这很有帮助 - 但是你仍然可以不填写日期时间并提交，或者输入无效的日期时间（例如4月32日）。
设置最大和最小时间
您可以使用
min
和
max
属性来限制用户可以选择的有效时间。在下面的例子中，我们将最小时间
12:00
和最大时间设置为
18:00
：
<form>
<label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label>
<input id="appt-time" type="time" name="appt-time"
min="12:00" max="18:00">
<span class="validity"></span>
</form>div {
margin-bottom: 10px;
position: relative;
input[type="number"] {
width: 100px;
input + span {
padding-right: 30px;
input:invalid+span:after {
position: absolute;
content: '✖';
padding-left: 5px;
input:valid+span:after {
position: absolute;
content: '✓';
padding-left: 5px;
}其结果是：
- 只有12:00至18:00之间的时间将被视为有效 - 超出该范围的时间将被视为无效。
- 根据您使用的浏览器，您可能会发现超出指定值的时间甚至可能在时间选择器（例如Edge）中无法选择。
需要时间
此外，您可以使用该
required
属性来强制填写时间。因此，如果您尝试提交超出设定范围的时间或空的日期字段，支持的浏览器将显示错误。
我们来看一个例子 - 在这里我们设置了最小和最大时间，并且还要求这个字段：
<form>
<label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label>
<input id="appt-time" type="time" name="appt-time"
min="12:00" max="18:00" required>
<span class="validity"></span> </form>
<input type="submit" value="Submit form">
</form>如果您尝试使用不完整的日期提交表单（或者设置的界限以外的日期），则浏览器显示错误。现在尝试玩这个例子：
这里是未使用支持浏览器的人的截图：
重要说明：HTML表单验证 不能 取代服务器端脚本，以在被允许进入数据库之前确保输入的数据格式正确。有人很容易调整HTML，使他们绕过验证，或完全删除它。也有人可能完全绕过你的HTML，直接提交数据到你的服务器。如果您的服务器端代码无法验证其接收到的数据，那么当格式不正确的数据（或数据太大，类型错误等等）输入到您的数据库时，可能会导致灾难。
处理浏览器支持
如上所述，在编写本文时使用时间输入的主要问题是浏览器支持 - Safari不支持在桌面上，老版本的IE不支持。
Android和iOS等移动平台可以很好地利用这些输入类型，提供专业的UI控件，使得在触摸合成环境中选择值变得非常简单。例如，
time
Android版Chrome 的选取器如下所示：
不支持的浏览器会优雅地降级为文本输入，但是这会在用户界面的一致性（所呈现的控件将不同）和数据处理方面产生问题。
第二个问题是最严重的 - 就像我们之前提到的那样，
time
输入的实际值总是被格式化
hh:mm
。另一方面，使用文本输入时，浏览器默认不知道日期应采用何种格式，人们可以通过多种方式写入时间，例如：
-
3.00 pm
-
3:00pm