HTML5 input 类型 time

类型为 time 的输入元素 <input> ,旨在让用户轻松输入时间(小时和分钟,以及可选的秒)。


实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p>
  5. 根据浏览器支持:<br>
  6. 当您填写输入字段时会弹出日期选择器。
  7. </p>
  8. <form action="/example/html/action_page.aspx">
  9. 请选取一个时间:
  10. <input type="time" name="usr_time">
  11. <input type="submit">
  12. </form>
  13. <p><b>注释:</b>Firefox 或者
  14. Internet Explorer 11 以及更早版本不支持 type="time"。</p>
  15. </body>
  16. </html>

浏览器支持

表格中的数字注明了完全支持该选择器的首个浏览器版本。

类型
time20No571410

定义与用法

<input type="time"> 允许用户选择时间(无时区)。

根据浏览器支持,时间选择器会出现输入字段中。


显示方式

Chrome and Opera

在 chrome/opera 中,选择时间很简单,根据操作系统区域设置,插槽以12或24小时格式输入小时和分钟,上下箭头用于递增和递减当前选定的组件。在某些版本中,会提供一个“x”按钮来清除控件的值。

12-hour

24-hour

Firefox

火狐 的时间选择和 Chrome 非常相似,只是它没有上下箭头。它还使用12或24小时格式输入时间,基于系统区域设置。提供“X”按钮以清除控件的值。

12-hour

24-hour

Edge

Edgede 时间选择有点复杂,打开一个小时和分钟的滚动区域。它和chrome一样,使用12或24小时格式输入时间,基于系统区域设置:

12-hour

24-hour

分类导航