Time Input in HTML5

Time input form

The time input type in HTML5 lets a user enter a time. Both the hour and minute are collected, as well as whether it's a.m. or p.m. There isn't a time zone selection. Some browsers actually may display a clock or other date control input device to allow users to submit the time more easily.

How to Use the Time Input Type

You can see what the HTML code looks like on a live web page over at JSFiddle. The expression can be wrapped in a form, and text can be added for instructions. You can choose month, day, and year, as well, as shown in examples at jsfiddle.net.

Web Browser Support

Support for the time input is scattered across every web browser, including Chrome, Safari, Opera, Firefox, and Edge. Some browsers show a regular text box in which you have to type the time and toggle between a.m. and p.m. Others might include a date selector or won't show anything at all.

This is actually an important and helpful fallback for the browsers that do not support this HTML5 form type. You can use this input on your web forms to gather better data from the browsers that support it. Browsers that do not support this input type will simply default to what is essentially the standard field — what you would've used in the absence of the time field anyway. 

If the data gathered in this field needs to conform to a certain date standard, you can use this input type and validate that the contents are time with a script or CGI. This also covers your bases for those older browsers and the way they fall back to a text input type.

Input Time Attributes

You can use the following parameters with the time input type:

  • autocomplete
  • list
  • max
  • min
  • readonly
  • required
  • step
  • valueAsNumber
  • selectedOption
  • stepDown()
  • stepUp()