<input type="time">

在HTML中，<input type="time">用于定义一个时间输入/选择控件。该控件提供一个界面让用户选择一个时间。

<input type="time">的定义格式

在HTML中，使用如下形式来定义一个时间控件：

不同浏览器在显示该控件时，其外观可能不尽相同。

该例在谷歌浏览器/Edge浏览器中的显示效果如下：

谷歌浏览器中的效果                    Edge浏览器中的效果

value属性

value属性用于设置<input type="time">控件的默认时间值。

该值是一个时间字符串，其形式为：hh:mm或hh:mm:ss。

其中，hh表示小时，其取值范围为00 - 23 ；mm表示分钟，其取值范围为00 - 59，ss表示秒，其取值范围为00 - 59。

在用户设置value属性值时总是使用24小时的格式来设置，但用户输入/或设置完，在浏览器中显示的格式取决于当前系统的设置或浏览器的设置（即有可能变为12时格式的时间）。

其在Edge浏览器中的显示效果如下：

max属性

<input type="time">的max属性用于指定该控件的最大时间值，如果该属性值是无效的字符串，则该属性设置将失效，即max属性对该控件不起作用。

其在Edge浏览器中的浏览效果如下：

因为时间可以循环，该控件并不像<input type="date">那样有禁止选择的数值。

min属性

min属性用于给出<input type="time">可接受的最小时间值。

如果该属性值是无效的字符串，则该属性将不起作用。

需要注意的是，对于时间的min属性和max属性并不只能考虑数值上的大小，还要考虑跨午夜的情况，比如min属性的值设置为：14:20，而max属性设置为06:20，则是指当天的14:20到第二天的上午6:20。

其在Edge浏览器中的浏览效果如下：

step属性

step属性用于设置<input type="time">可调整的时间间隔。

step属性是一个大于0的整数值，其单位是秒，默认值为60秒，如果指定的值不是60的整数倍时，则时间输入控件将提供秒的输入区域。

当设置了step属性后，在谷歌浏览器或Edge浏览器中在点击输入框中的分或秒后，可以通过键盘上的上下箭头来调整时间。

如果设置了min属性后，step属性将以min属性的值为基点进行间隔设置；

如果设置了value属性，则step属性将以value属性的值为基点进行间隔设置；

如果设置了max属性，则step属性将以max属性的值为基点进行间隔设置；

如果没有提供以上所说的任何属性，则时间控件将会以适当的间隔进行调整。

上面的例子中，第1个时间控件中step属性的值设置为300，而没有设置其他属性，则该控件默认允许的间隔为5分钟的整数倍（谷歌浏览器/Edge浏览器）。

第2个时间控件中step属性的值为270，因为不是60的整数倍，则该控件会显示出秒输入区，并且调整为秒输入区需要是30秒的整数倍（谷歌浏览器-114版，而在Edge浏览器中step属性不起作用-115版——表单不验证，可以通过键盘上下箭头调整）

第3个时间控件除了指定了step属性的值为300外，还指定了min属性的值为13:20，则该时间控件将以13:20为基点，每5分钟是有效的值，且时间不能晚于13:20，即13:25,13:30,13:35等是有效的值。

第4个时间控件除了指定了step属性的值为300外，还指定了value属性的值为13:23，则该时间控件将以13:23为基点，往前或往后每隔5分钟都是有效的值，即13:13，13:18，13:23，13:28等都是有效的输入值。（该设置在谷歌浏览器中有效，而在Edge浏览器中不起作用——表单不验证，但可以使用键盘上下箭头调整时有用。）

第5个时间控件除了指定了step属性的值为300外，还指定了max属性的值为20:20，则该时间控件将以20:20为基点，往前每隔5分钟都是有效的输入值，即20:15，20:10，20:00等都是有效的值。

以上各例在谷歌浏览器中的效果如下图所示：

当输入的值不符合要求时，浏览器给出下图相似的提示：

list属性

list属性为<input type="time">提供一个用户可选择的时间列表，该值是<datalist>元素的id值。

在<datalist>元素中预定义了时间值的列表，可以方便用户选择输入。用户可以从这个列表中选择一个值，也可以使用输入方式或在时间控件中选择其它的值。

下面这个例子演示了<input type="time">控件list属性的使用方法。

上例在浏览器中的效果如下：

其他属性

<input type="time">控件也支持readonly属性、required属性、disabled属性等属性，分别用于指定该控件的值是只读的，不能为空和禁用。

有关这些属性的具体用法，读者可以参考《HTML 表单中的单行文本控件》一文中的相关内容。

以上相关例子在浏览器中的预览效果可以点击这里查看。

以上讲解了<input type="time">的用法及相关属性的含义，如有问题请留言明示。

相关阅读推荐：

<input type="date">

<input type="datetime-local">

<input type="text">

<input type="radio">

<input type="checkbox">

<input type="color">

<input type="submit"> | <input type="reset"> | <input type="button">

如对以上内容有疑问或文中有错误之处，请留言指出。如需转载，请注明出处：翔宇亭IT乐园（http://www.biye5u.com），并给出本文的链接地址：http://www.biye5u.com/article/html5/2023/6617.html。